Disable All Checkboxes When 'All' CheckBoxes Is Selected

Question

I have an asp.net weform and on one page i have 7 checkboxes, what i'm after is, if the first checkbox is selected, then the remaining 6 are disabled otherwise if a checkbox (2 - 6) is selected i want the first one to be disabled.

Also if the user selects 2 or more checkboxs from 2 - 6, then then first one should only be enabled once they are all unchecked.

HTML

<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">All services</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02AllServices" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Site content uploading only</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02ContentUploading" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Site content &amp; layout checking</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02ContentLayoutChecking" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Testing on various browsers</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02TestingVariousBrowsers" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Testing all website functionality</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02TestingFunctionality" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Responsive design layouting only</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02ResponsiveLayouting" runat="server" />
     </div>
</div>
<div class="form-group">
     <div class="col-xs-offset-0 col-sm-offset-4 col-sm-3">Responsive design layout testing</div>
     <div class="col-sm-1">
          <asp:CheckBox ID="Step02ResponsiveTesting" runat="server" />
     </div>
</div>

I'm guessing [this](http://stackoverflow.com/a/9669062/2174170) is what you're looking for. It doesn't cater for unchecking the first one when you select 2 or more though. — Dumisani, Aug 21 '15 at 12:34
@Dumisani Not really. I dont want all the checkboxes to be selected just the 'All services' is sufficient to know they want everything. — murday1983, Aug 21 '15 at 12:37
Does changing to `$(this).prop('disabled', checkedStatus);` help? — Dumisani, Aug 21 '15 at 12:42

score 1 · Accepted Answer · answered Aug 21 '15 at 12:39

$(document).on('click', ':checkbox', function(){
    $(":checkbox:not('#Step02AllServices')").attr('disabled', $('#Step02AllServices').is(':checked')); //disabled checkBoxes if 1st is checked
    $("#Step02AllServices").attr('disabled', $(":checkbox:not('#Step02AllServices')").is(':checked'));//disabled 1st checkBoxe if any except 1st is checked

});

If i understand you correctly ...

If click on First checkbox - other should be disabled.
If click on any from 2-6 then First should be disabled.

Last case i don't understand

Example

Also, as i remember ASP.Net add some prefix to ID of its elements. To disable this you can add to your elements this part ClientIDMode="Static"

Exactly what i was looking – murday1983 Aug 21 '15 at 13:02 — murday1983, Aug 21 '15 at 13:02

score -1 · Answer 2 · answered Aug 21 '15 at 12:29

-1

Give them all the same class, like "checkbox" or something. Then in the document ready:

 $("#AllClear").on("click", function() {
    $(".checkbox").attr("checked", false);
  }

answered Aug 21 '15 at 12:29

Dean.DePue

1,013
1
21
45

Can't get it working but looking at your solution, if i select any checkbox from the second one downwards, then your code will disable them all. This isn't what i mention or wanted. If a user selected the first one, then yes all others will be disabled. If the user selects the second one then they are allowed to select the third, fourth ect and the first one needs to be disabled – murday1983 Aug 21 '15 at 12:36

Disable All Checkboxes When 'All' CheckBoxes Is Selected

2 Answers2