Can I set a checkbox to be enabled or disabled based on whether multiple checkboxes are checked?

Question

So I have multiple row of check boxes like the picture below

I want to make the add,edit and delete checkbox in the same row be disabled when the most left checkbox in the same row is checked using jquery, i try using solution in here solution, but this solution only work for 1 group of checboxes, i'm gonna have a lot of checkboxes group, i prefer using loop statement for this case, but i cant come up with any solution.

here's my html code:

  <div class="row">
  <div class="col-sm-5"><input type="checkbox" name="aauth100" value="auth100" id="auth100" onclick ="togAuth1()">New Member + Kit Purchase</input></div>
  <div class="col-sm-2"><input type="checkbox" name="aaddAuth100" value="addAuth100" id="addAuth100">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="aeditAuth100" value="editAuth100" id="editAuth100">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="adelAuth100" value="delAuth100" id="delAuth100">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth101" value="auth101" id="auth101">New Member Registration</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth101" value="addAuth101" id="addAuth101">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth101" value="editAuth101" id="editAuth101">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth101" value="delAuth101" id="delAuth101">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth102" value="auth102" id="auth102">Member Data Maintenance</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth102" value="addAuth102" id="addAuth102">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth102" value="editAuth102" id="editAuth102">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth102" value="delAuth102" id="delAuth102">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth103" value="auth103" id="auth103">Member Registration Listing</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth103" value="addAuth103" id="addAuth103">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth103" value="editAuth103" id="editAuth103">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth103" value="delAuth103" id="delAuth103">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth104" value="auth104" id="auth104">Geneology Listing</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth104" value="addAuth104" id="addAuth104">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth104" value="editAuth104" id="editAuth104">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth104" value="delAuth104" id="delAuth104">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth105" value="auth105" id="auth105">Member Rank Report</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth105" value="addAuth105" id="addAuth105">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth105" value="editAuth105" id="editAuth105">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth105" value="delAuth105" id="delAuth105">Delete</input></div>
</div>

@SpencerWieczorek what if i want to use costume class for css style? — Idham Choudry, Aug 02 '16 at 07:47
@Wallflower Then its a choice. ID's are meant to be unique, so no problem if you don't repeat ID's. — Randy, Aug 02 '16 at 07:50

score 4 · Answer 1 · edited Aug 02 '16 at 07:52

4

You can assign some class to your checkbox. Then use the .each() method of jquery this way.

$(".someclass").each(function(){

            if($(this).is(':checked'))
            {
               // Disable other checkbox in row
            }
            else
            {
                //don't disable checkbox
            }
        })

This will loop through all the checkbox with the assigned class and you can easily separate the checkbox of left row with class. Though you will have to find a way, how to target other checkbox at right side in the same row.

edited Aug 02 '16 at 07:52

George G

7,443
12
45
59

answered Aug 02 '16 at 07:50

Archit

139
2
8

the problem is im gonna have alot of classes if i use that – Idham Choudry Aug 02 '16 at 08:00

score 1 · Accepted Answer · answered Aug 02 '16 at 08:02

1

One way you can do this is to to use each row. Then from there select the first div and get it's input. That can be used for the change event, which then you can disable all but the first checkbox:

$('.row').each(function(){
  var self = this;
  $(this).find('div:first input').change(function(){
     // disables all but the first input in the div rows
     if(this.checked) $(self).find('div:gt(0) input').attr("disabled", true);
     else $(self).find('div:gt(0) input').attr("disabled", false);
  });
});

Demo

answered Aug 02 '16 at 08:02

Spencer Wieczorek

21,229
7
44
54

thanks its working, can u explain to me what is `'div:gt(0) input'` – Idham Choudry Aug 02 '16 at 08:09
@Wallflower It means to select the `div` elements with a index larger than `0`. In other words it gets all the inputs within the div's except for the first one (*being the checkbox on the left*). – Spencer Wieczorek Aug 02 '16 at 08:11
i've encountered some problem, if the checkbox is already checked from the beginning, the other checkbox still not disabled – Idham Choudry Aug 03 '16 at 06:44
@Wallflower That's because the event only happens on `change` when the checkbox was ticked or un-ticked. To have it happen automatically at the start as well you can call the change event of the input by adding `$(this).find('div:first input').change()` on the end after defining the change event ([example](https://jsfiddle.net/DTcHh/23243/)). – Spencer Wieczorek Aug 03 '16 at 07:53

BobRodes · Answer 3 · 2016-08-02T08:57:03.237

This single line of code does the trick, in a change event:

$('.col-sm-5').on('change', function(){
    $(this).nextAll('.col-sm-2').children('input').prop('disabled',
         $(this).children('input').prop('checked'));
});

I'll break it down:

$('.col-sm-5').on('change', ...

Whenever an element with the col-sm-5 class (or one of its children) changes...

$(this).nextAll('.col-sm-2') ...

Get all the following siblings of this (the element that changed) which have the class col-sm-2 ...

.children('input') ...

Get the input elements that are children of the above...

.prop('disabled', ...

The disabled property will be set to either true or false ...

$(this).children('input') ...

Get the input box that is contained in the div with the class col-sm-5 that just changed ...

.prop('checked') ...

Find out if it's checked or not. So,

$(this).children('input').prop('checked')

evaluates to either true or false, and we're plugging it into this:

.prop('disabled', [true or false])

So, if the first checkbox is checked, the next three are disabled, and if it isn't, they aren't.

Can I set a checkbox to be enabled or disabled based on whether multiple checkboxes are checked?

3 Answers3