jQuery – ativar / desativar a checkbox de seleção

Eu tenho um monte de checkboxs de seleção como esta. Se a checkbox de seleção “Check Me” estiver marcada, todas as outras 3 checkboxs de seleção devem estar habilitadas, caso contrário elas devem ser desabilitadas. Como posso fazer isso usando jQuery?

 Check Me     

Altere sua marcação ligeiramente:

 
Check Me

e depois

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

Você pode fazer isso usando seletores de atributos sem introduzir o ID e as classs, mas é mais lento e difícil de ler.

Esta é a solução mais atualizada.

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

Aqui estão os detalhes de uso para .attr() e .prop() .

jQuery 1.6+

Use a nova function .prop() :

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

jQuery 1.5 e abaixo

A function .prop() não está disponível, portanto, você precisa usar .attr() .

Para desabilitar a checkbox de seleção (definindo o valor do atributo desativado),

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

e para habilitar (removendo o atributo inteiramente)

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

Qualquer versão do jQuery

Se você estiver trabalhando com apenas um elemento, será sempre mais rápido usar DOMElement.disabled = true . O benefício de usar as .prop() e .attr() é que elas operarão em todos os elementos correspondentes.

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

ref: Definindo “marcada” para uma checkbox de seleção com jQuery?

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

Com funcionalidade adicional para garantir a verificação, todas as checkboxs de seleção serão marcadas / dechecked se todas as checkboxs de seleção individuais estiverem marcadas:

 $(".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'); }); } }); }); 

Aqui está outra amostra usando o JQuery 1.10.2

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