jQuery – case à cocher activer / désactiver

J’ai un tas de cases à cocher comme ça. Si la case à cocher “Check Me” est cochée, toutes les 3 autres cases à cocher doivent être activées, sinon elles doivent être désactivées. Comment puis-je le faire en utilisant jQuery?

Check Me

Changez légèrement votre balisage:

 
Check Me

et alors

 $(function() { enable_cb(); $("#group1").click(enable_cb); }); function enable_cb() { if (this.checked) { $("input.group1").removeAttr("disabled"); } else { $("input.group1").attr("disabled", true); } } 

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

C’est la solution la plus récente.

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

Voici les détails d’utilisation pour .attr() et .prop() .

jQuery 1.6+

Utilisez la nouvelle fonction .prop() :

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

jQuery 1.5 et ci-dessous

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

Pour désactiver la case à cocher (en définissant la valeur de l’atsortingbut disabled)

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

et pour activer (en supprimant l’atsortingbut entièrement) faire

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

Toute version de jQuery

Si vous travaillez avec un seul élément, il sera toujours plus rapide d’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: Réglage “vérifié” pour une case à cocher avec jQuery?

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

Avec des fonctionnalités supplémentaires pour garantir que la case à cocher tout 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; }); 
     $(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'); }); } }); }); 

Voici un autre exemple utilisant JQuery 1.10.2

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