jQuery - case à cocher activer / désactiver

J'ai un tas de cases à cocher comme celle-ci. Si la case "Check Me" est cochée, les 3 autres cases à cocher doivent être activées, sinon elles doivent être désactivées. Comment puis-je faire cela en utilisant jQuery?

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

Modifiez légèrement votre balisage:

$(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>

Vous pouvez le faire en utilisant des sélecteurs d'attributs sans introduire l'ID et les classes, mais c'est plus lent et (à mon humble avis) plus difficile à lire.

Il s'agit de la solution la plus récente.

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

Voici les détails d'utilisation de .attr()et .prop().

jQuery 1.6+

Utilisez la nouvelle .prop()fonction:

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

jQuery 1.5 et inférieur

La .prop()fonction n'est pas disponible, vous devez donc l'utiliser .attr().

Pour désactiver la case à cocher (en définissant la valeur de l'attribut désactivé),

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

et pour activer (en supprimant l'attribut entièrement) faire

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

Toute version de jQuery

Si vous travaillez avec un seul élément, il sera toujours plus rapide à utiliser DOMElement.disabled = true. L'avantage d'utiliser les fonctions .prop()et .attr()est qu'elles fonctionneront sur tous les éléments correspondants.

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

ref: Définir "coché" pour une case à cocher avec jQuery?

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

Avec des fonctionnalités supplémentaires pour garantir que la case à cocher Tout cocher est cochée / décochée si toutes les cases à cocher individuelles sont cochées:

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

Voici un autre exemple utilisant JQuery 1.10.2

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