jQuery - checkbox enable/disable

I have a bunch of checkboxes like this. If the "Check Me" checkbox is checked, all the other 3 checkboxes should be enabled, else they should be disabled. How can I do this using jQuery?

<form name="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> 

6 Answers

Change your markup slightly:

$(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=""></script> <form name="frmChkForm"> <input type="checkbox" name="chkcc9">Check Me <br> <input type="checkbox" name="chk9[120]"><br> <input type="checkbox" name="chk9[140]"><br> <input type="checkbox" name="chk9[150]"><br> </form>

You can do this using attribute selectors without introducing the ID and classes but it's slower and (imho) harder to read.

This is the most up-to-date solution.

<form name="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> $(function() { enable_cb(); $("#group1").click(enable_cb); }); function enable_cb() { $("input.group1").prop("disabled", !this.checked); } 

Here is the usage details for .attr() and .prop().

jQuery 1.6+

Use the new .prop() function:

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

jQuery 1.5 and below

The .prop() function is not available, so you need to use .attr().

To disable the checkbox (by setting the value of the disabled attribute) do

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

and for enabling (by removing the attribute entirely) do

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

Any version of jQuery

If you're working with just one element, it will always be fastest to use DOMElement.disabled = true. The benefit to using the .prop() and .attr() functions is that they will operate on all matched elements.

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

ref: Setting "checked" for a checkbox with jQuery?

<form name="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> $("#chkAll").click(function() { $(".chkGroup").attr("checked", this.checked); }); 

With added functionality to ensure the check all checkbox gets checked/dechecked if all individual checkboxes are checked:

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

Here's another sample using JQuery 1.10.2

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

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

<script src=""></script> <input type="checkbox" name="selecctall" value="All" /> <input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" /> <input type="checkbox" name="checkid[]" value="1" /> <input type="checkbox" name="checkid[]" value="2" />

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

<script src=""></script> <form name="frmChkForm"> <input type="checkbox" name="chkcc9">Check Me <br> <input type="checkbox" name="chk9[120]"><br> <input type="checkbox" name="chk9[140]"><br> <input type="checkbox" name="chk9[150]"><br> </form>