271

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" 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>
the
  • 21,007
  • 11
  • 68
  • 101
Jake
  • 25,479
  • 31
  • 107
  • 168

6 Answers6

474

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

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

dota2pro
  • 7,220
  • 7
  • 44
  • 79
cletus
  • 616,129
  • 168
  • 910
  • 942
  • 3
    For the disabling part, try this url: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html – Walt Stoneburner Feb 24 '10 at 22:56
  • 4
    This is not directly related to the question, but in IE the change event will not fire until the checkbox loses focus. I usually call `$(this).change` on the click event of the first checkbox. – mcrumley Feb 24 '10 at 23:01
  • Woops, got it in my head to check/uncheck the checkboxes not to enable/disable them. Fixed. :) – cletus Feb 24 '10 at 23:03
  • If it is a CheckBoxList, I had to do : var gradeCheckbox = document.getElementById(chkBxVar).getElementsByTagName('input'); //chkBxVar is the clientID of the control $(gradeCheckbox).attr("disabled", true); – Narayana Dec 25 '11 at 11:18
  • 13
    you can use `.prop()` instead of `.attr()`. – Reza Owliaei May 28 '12 at 03:47
  • 7
    I had problems with .prop(), it worked on initial set, but if I toggled back and forth, the second time it failed to "disable" the checkbox. I stuck with attr(). – ProVega May 26 '13 at 20:46
  • You can use `checkboxradio('disable')` as described in the [jQuery Forums](http://forum.jquery.com/topic/property-to-disable-checkbox). (This applies at least to jQuery Mobile.) – Matthew Walker Sep 16 '13 at 11:09
  • 3
    @ProVega [This might explain your issue.](http://forum.jquery.com/topic/prop-disabled-false-vs-removeprop-disabled) – Andrew Dec 06 '13 at 22:43
  • For reference, I think it is worth mentioning that input.group1 is seeking the class. He has an ID on the box needing checked, The easiest way to grab this is to simply use $("#group1") which will search by ID instead of by class. Just in case there is invalid HTML and there are duplicate IDs on the page, use something like this to apply scope: $("#frmChkForm #group1"); Happy coding! – Anthony Mason Jul 27 '16 at 13:25
  • I know it wasn't the question, but how to combine with database? If `Check Me` is stored in a db (value 1), and I open the form, the fields that supposed to be disabled, are going still to be enabled, even if I'm adding `'disabled' => $model->CheckMe` to it. If I remove the `else` it's almost OK, but unchecking doesn't re-enable the other checkboxes. Should I add a new question? – user2511599 Oct 14 '19 at 07:52
  • @user2511599 Why would you disable any of the fields? To store the field in a DB, I would iterate through the boxes and combine the values into a string and store that. Or you could use numbers to represent box 1, 2, 3, and 4, with `1234` representing all of them being selected, `23` for boxes 2 and 3, etc. You may be better off asking a new question on SO, if you haven't, already, if that doesn't answer it. – vapcguy Aug 04 '21 at 16:58
120

This is the most up-to-date solution.

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

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?

Community
  • 1
  • 1
roydukkey
  • 3,149
  • 2
  • 27
  • 43
  • 2
    For those that are using an asp:CheckBox like myself, it renders in the browser as an input within a span. So in my case, I had to access it with jQuery as $('.checkboxClassName input').prop('disabled', false) ... and trying to change 'enabled' didn't work for me either :) Thanks for this answer! – deebs Jun 01 '16 at 14:13
10
<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);
});

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;
});
zincorp
  • 3,284
  • 1
  • 15
  • 18
1

$(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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" />
dota2pro
  • 7,220
  • 7
  • 44
  • 79
princespn
  • 31
  • 7
1

Here's another sample using JQuery 1.10.2 

$(".chkcc9").on('click', function() {
            $(this)
            .parents('table')
            .find('.group1') 
            .prop('checked', $(this).is(':checked')); 
});
Paolo Guevara
  • 61
  • 4
-1

$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="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>
Biblbroks42
  • 330
  • 3
  • 11