jQuery - Kontrollkästchen aktivieren / deaktivieren

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>

Ä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>

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

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?

<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;
});

Hier ist ein weiteres Beispiel mit JQuery 1.10.2

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