jQuery - Kontrollkästchen aktivieren / deaktivieren

234

Ich habe eine Reihe solcher Kontrollkästchen. Wenn das Kontrollkästchen "Check Me" aktiviert ist, sollten alle anderen 3 Kontrollkästchen aktiviert sein, andernfalls sollten sie deaktiviert sein. Wie kann ich das mit jQuery machen?

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>
jquery Jake
quelle

Antworten:

413

Ändern Sie Ihr Markup leicht:

$(function() {
  enable_cb();
  $("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    $("input.group1").removeAttr("disabled");
  } else {
    $("input.group1").attr("disabled", true);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
  <input type="checkbox" name="chkcc9" id="group1">Check Me <br>
  <input type="checkbox" name="chk9[120]" class="group1"><br>
  <input type="checkbox" name="chk9[140]" class="group1"><br>
  <input type="checkbox" name="chk9[150]" class="group1"><br>
</form>
Erweitern Sie das Snippet

Sie können dies mit Attributselektoren tun, ohne die ID und die Klassen einzuführen, aber es ist langsamer und (imho) schwerer zu lesen.

Cletus
quelle
3
Versuchen Sie für die Deaktivierung Teil dieser URL: jquery-howto.blogspot.com/2008/12/…
Walt Stoneburner
3
Dies hängt nicht direkt mit der Frage zusammen, aber im IE wird das Änderungsereignis erst ausgelöst, wenn das Kontrollkästchen den Fokus verliert. Normalerweise rufe ich $(this).changedas Klickereignis des ersten Kontrollkästchens auf.
mcrumley
10
Sie können .prop()anstelle von verwenden .attr().
Reza Owliaei
5
Ich hatte Probleme mit .prop (), es funktionierte beim ersten Set, aber wenn ich hin und her wechselte, konnte das Kontrollkästchen beim zweiten Mal nicht "deaktiviert" werden. Ich blieb bei attr ().
ProVega
3
@ProVega Dies könnte Ihr Problem erklären.
Andrew
100

Dies ist die aktuellste Lösung.

<form name="frmChkForm" id="frmChkForm">
    <input type="checkbox" name="chkcc9" id="group1" />Check Me
    <input type="checkbox" name="chk9[120]" class="group1" />
    <input type="checkbox" name="chk9[140]" class="group1" />
    <input type="checkbox" name="chk9[150]" class="group1" />
</form>

$(function() {
    enable_cb();
    $("#group1").click(enable_cb);
});

function enable_cb() {
    $("input.group1").prop("disabled", !this.checked);
}

Hier sind die Nutzungsdetails für .attr()und .prop().

jQuery 1.6+

Verwenden Sie die neue .prop()Funktion:

$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);

jQuery 1.5 und niedriger

Die .prop()Funktion ist nicht verfügbar, daher müssen Sie verwenden .attr().

Deaktivieren Sie das Kontrollkästchen (indem Sie den Wert des Attributs disabled festlegen)

$("input.group1").attr('disabled','disabled');

und zum Aktivieren (durch vollständiges Entfernen des Attributs) tun

$("input.group1").removeAttr('disabled');

Beliebige Version von jQuery

Wenn Sie mit nur einem Element arbeiten, ist es immer am schnellsten zu verwenden DOMElement.disabled = true. Der Vorteil der Verwendung der Funktionen .prop()und .attr()besteht darin, dass sie mit allen übereinstimmenden Elementen arbeiten.

// Assuming an event handler on a checkbox
if (this.disabled)

ref: Mit jQuery für ein Kontrollkästchen "aktiviert" setzen?

Roydukkey
quelle
2
Für diejenigen, die wie ich ein asp: CheckBox verwenden, wird es im Browser als Eingabe innerhalb eines Zeitraums gerendert. In meinem Fall musste ich mit jQuery als $ ('. CheckboxClassName input'). Prop ('disabled', false) darauf zugreifen ... und der Versuch, 'enabled' zu ändern, funktionierte auch bei mir nicht :) Danke für diese Antwort!
Deebs
10 
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>

$("#chkAll").click(function() {
   $(".chkGroup").attr("checked", this.checked);
});

Mit zusätzlichen Funktionen, um sicherzustellen, dass das Kontrollkästchen Alle aktivieren / deaktiviert wird, wenn alle einzelnen Kontrollkästchen aktiviert sind:

$(".chkGroup").click(function() {
  $("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});
Zinkorp
quelle
1

Hier ist ein weiteres Beispiel mit JQuery 1.10.2 

$(".chkcc9").on('click', function() {
            $(this)
            .parents('table')
            .find('.group1') 
            .prop('checked', $(this).is(':checked')); 
});
Paolo Guevara
quelle
1 

$(document).ready(function() {
  $('#InventoryMasterError').click(function(event) { //on click
    if (this.checked) { // check select status
      $('.checkerror').each(function() { //loop through each checkbox
        $('#selecctall').attr('disabled', 'disabled');
      });
    } else {
      $('.checkerror').each(function() { //loop through each checkbox
        $('#selecctall').removeAttr('disabled', 'disabled');
      });
    }
  });

});

$(document).ready(function() {
  $('#selecctall').click(function(event) { //on click
    if (this.checked) { // check select status
      $('.checkbox1').each(function() { //loop through each checkbox
        $('#InventoryMasterError').attr('disabled', 'disabled');
      });

    } else {
      $('.checkbox1').each(function() { //loop through each checkbox
        $('#InventoryMasterError').removeAttr('disabled', 'disabled');
      });
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selecctall" name="selecctall" value="All" />
<input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" />
Erweitern Sie das Snippet

princespn
quelle
0 

$jQuery(function() {
  enable_cb();
  jQuery("#group1").click(enable_cb);
});

function enable_cb() {
  if (this.checked) {
    jQuery("input.group1").removeAttr("disabled");
  } else {
    jQuery("input.group1").attr("disabled", true);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
  <input type="checkbox" name="chkcc9" id="group1">Check Me <br>
  <input type="checkbox" name="chk9[120]" class="group1"><br>
  <input type="checkbox" name="chk9[140]" class="group1"><br>
  <input type="checkbox" name="chk9[150]" class="group1"><br>
</form>
Erweitern Sie das Snippet

Guvanch Hojamov
quelle