jQuery-case à cocher Activer / désactiver

c'est 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 pour .attr() et .prop() .

jQuery 1.6+

utiliser la nouvelle .prop() fonction:

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

jQuery 1.5 et inférieur

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'attribut disabled) do

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

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

$("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ément.

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

ref: Réglage "checked" 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 la fonctionnalité ajoutée pour s'assurer que la case à cocher toutes les cases à cocher sont cochées / déchiffrées si toutes les cases à cocher sont cochées:

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

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


$(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 échantillon en utilisant JQuery 1.10.2

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