Überprüfen / Deaktivieren Sie das Kontrollkästchen mithilfe von jQuery?

Question

Ich habe einige Eingabefelder auf meiner Seite und zeige ihre Werte mit JavaScript an.

Ich benutze die .set("value","") Funktion, um den Wert zu bearbeiten, ein zusätzliches Kontrollkästchen hinzuzufügen und einen Wert zu übergeben.

Hier möchte ich überprüfen, ob value == 1 ist, dann sollte dieses Kontrollkästchen angekreuzt sein. Andernfalls sollte es nicht angekreuzt sein.

Ich habe das mit zwei Divs gemacht, aber ich fühle mich damit nicht wohl, gibt es eine andere Lösung?

if(value == 1) {
    $('#uncheck').hide();
    $('#check').show();
} else{
    $('#uncheck').show();
    $('#check').hide();
}

Answer 1

Für jQuery 1.6+ :

.attr() ist veraltet für Eigenschaften; verwenden Sie stattdessen die neue .prop() Funktion wie folgt:

$('#myCheckbox').prop('checked', true); // Markiert es
$('#myCheckbox').prop('checked', false); // Entmarkiert es

Für jQuery < 1.6:

Um ein Kontrollkästchen zu markieren/entmarkieren, verwenden Sie das Attribut checked und ändern Sie dies. Mit jQuery können Sie Folgendes tun:

$('#myCheckbox').attr('checked', true); // Markiert es
$('#myCheckbox').attr('checked', false); // Entmarkiert es

Weil Sie wissen, in HTML würde es so aussehen:

Allerdings können Sie sich nicht auf die .attr() Methode verlassen, um den Wert des Kontrollkästchens zu erhalten (falls erforderlich). Sie müssen sich auf die .prop() Methode verlassen.

Answer 2

Sie können prop() dafür verwenden, da Vor jQuery 1.6 die .attr()-Methode manchmal Eigenschaftswerte berücksichtigte, wenn einige Attribute abgerufen wurden, was zu inkonsistentem Verhalten führen konnte. Ab jQuery 1.6 bietet die .prop()-Methode eine Möglichkeit, explizit Eigenschaftswerte abzurufen, während .attr() Attribute abruft.

var prop=false;
if(value == 1) {
   prop=true; 
}
$('#checkbox').prop('checked',prop);

oder einfach,

$('#checkbox').prop('checked',(value == 1));

Ausschnitt

$(document).ready(function() {
  var chkbox = $('.customcheckbox');
  $(".customvalue").keyup(function() {
    chkbox.prop('checked', this.value==1);
  });
});

Dies ist ein Demo, um anzuzeigen, dass das Kontrollkästchen aktiviert ist, wenn Sie den Wert 1 eingeben, andernfalls wird das Kontrollkästchen deaktiviert.
Geben Sie einen Wert ein:

Ausgabekontrollkästchen:

Answer 3

Sie können den Zustand des Kontrollkästchens basierend auf dem Wert festlegen:

$('#your-checkbox').prop('checked', value == 1);