it-swarm.com.de

So erhalten Sie den Wert einer Bootstrap Toggle-Schaltfläche in jQuery

Ich habe dieses Markup und jQuery, aber ich kann den Schaltflächenwert oder das Ein-/Ausschalten oder eine andere Form der Erkennung der Einstellung des Umschalters nicht erfolgreich erfassen:

[~ # ~] html [~ # ~]

<div class="form-group">
    <label class="col-md-2 control-label" for="payMethod">Payment Method</label>
      <div class="col-md-2">
        <label class="checkbox-inline bootstrap-switch-noPad" for="payMethod">
          <input type="checkbox" id="payMethod" name="payMethod" data-size="small" value="Credit" data-on-text="Credit" data-on-color="success" data-off-text="Cash" data-off-color="warning" tabindex="13">
        </label>
      </div>
  </div>

jQuery

$('#payMethod').on( 'change', function() {
  alert('slid');
}); // does not work

$( "#payMethod" ).click(function() {
  alert( $('#payMethod').val() );
}); // does not work

$('#payMethod').change(function() {
  alert('Toggle: ' + $(this).prop('checked'));
}); // does not work

$('input[type=checkbox][name=payMethod]').change(function() {
  alert('help'); // does not work
});

Hier sind die Schieberegler (es gibt kein Kontrollkästchen): enter image description hereenter image description here

16
H. Ferrence

sie können dies versuchen

$("#payMethod").change(function(){
    if($(this).prop("checked") == true){
       //run code
    }else{
       //run code
    }
});
20
Makubex

Sie können einfach so verwenden: Wenn Sie in Ihrem HTML-Code id = abc für bootstrap toggle verwenden.

$('#abc').prop('checked')

Ausgabe ist: wahr oder falsch. (Richtig, wenn eingeschaltet, und falsch, wenn ausgeschaltet)

7
ThienSuBS

Ich vermute, dass das Skript vor dem HTML-Tag platziert ist? Wenn ja, verschieben Sie das Skript nach dem HTML-Tag oder platzieren Sie das Skript in der jQuery-Funktion wie folgt:

$(function()
{

    $('#payMethod').on( 'change', function() {
         alert('slid');
    }); // does not work

    $( "#payMethod" ).click(function() {
         alert( $('#payMethod').val() );
    }); // does not work

    $('#payMethod').change(function() {
        alert('Toggle: ' + $(this).prop('checked'));
    }); // does not work

    $('input[type=checkbox][name=payMethod]').change(function() {
        alert('help'); // does not work
    });
});

Am besten verwenden Sie die spätere Methode, mit der das Skript in die jQuery-Funktion eingefügt wird. Weil die Skripte gerendert werden, nachdem alle HTML-Tags gerendert wurden.