Disabling checkboxes based on selection of another checkbox in jquery

Question

I want to disable a set of checkbox based on selection of one textbox and enable the disabled ones if the checkbox is unchecked.

In the code below. If someone checks the checkbox for project cost under change this parameter then checkbox for project cost under Generate simulated value for this param should be disabled and all the checkboxes under change this parameter should be disabled except for checked one. Similarly this should be done each parameter like Project cost,avg hours,Project completion date, hourly rate etc.

One way i could think of was of on the click function disable each checkbox by the id. Is there a better way of doing it?

 <table>
<tr>
 <td></td>
 <td></td>
  <td>Change this parameter</td>
  <td>Generate simulated value for this param</td>

 </tr>
 <tr>
  <td>Project cost</td>
  <td><input type ="text" id ="pc"/></td>
  <td><input class="change" type="checkbox" name="chkBox" id="chkBox"></input></td>
  <td><input class="sim" type="checkbox" name="chkBox1" id="chkBox1"></input></td>

   </tr>
<tr>
<td>Avg hours</td>
<td><input type ="text" id ="avghrs"/></td>
<td><input class="change" type="checkbox" name="chkBoxa" id="chkBoxa"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1a" id="chkBox1a"></input></td>

</tr>

<tr>
<td>Project completion date</td>
<td><input type ="text" id ="cd"/></td>
<td><input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1b" id="chkBox1b"></input></td>

</tr>
<tr>
<td>Hourly rate</td>
<td><input type ="text" id ="hr"/></td>
<td><input class="change" type="checkbox" name="chkBoxc" id="chkBoxc"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1c" id="chkBox1c"></input></td>

</tr>
</table>

Thanks Prady

I am open to use radio button if it suits best, but i would need that user can choose only one param under headings "Change this parameter " and "Generate simulated value for this param" and both cant be selected for the same row — Prady
– Prady, Commented Feb 10, 2011 at 7:32

T.J. Crowder · Accepted Answer · 2011-02-10 07:45:18Z

2

If you use a naming convention for either your id or name attributes, you can probably use the various attribute substring selectors to select the checkboxes. For instance:

$(":checkbox[name^=foo]").attr("disabled", true);

...will disable all checkboxes whose name starts with "foo" (so, "foo1", "foo2", whatever). Or of course, you could use a class, etc.

You might be able to make that a bit more efficient if you can contain it to the table:

$("selector_for_table").find(":checkbox[name^=foo]").attr("disabled", true);

For instance, if you added a "checkboxTable" id to the table:

$("#checkboxTable").find(":checkbox[name^=foo]").attr("disabled", true);

More about attribute selectors:

jQuery docs
CSS3 docs (jQuery supports nearly all of CSS3, and then some)

Alternately, I can't quite tell from your question (you seem to mention checkboxes that aren't shown in the given markup), but if all of the checkboxes you want to act on are within the same table row as the one that was clicked, you can use traversal within the row to find the checkboxes to enable/disable.

For example, this change handler will disable all other checkboxes on the same table row as the one that fired the event:

$("selector_for_checkboxes").change(function() {

  var $this = $(this),
      row = $this.parents("tr");

  row.find(":checkbox").not($this).attr("disabled", this.checked);

});

Live copy

This one will do the same thing, but skipping any checkboxes that are already checked:

$(":checkbox").change(function() {

  var $this = $(this),
      row = $this.parents("tr");

  row.find(":checkbox:not(:checked)").not($this).attr("disabled", this.checked);

});

Live copy

edited Feb 10, 2011 at 7:45

answered Feb 10, 2011 at 7:32

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Prady Over a year ago

@TJ i am not sure if i understood the selector_for_table thing you mentioned. Are you telling that i need to give an id to the table and search for checkbox name in that table only?

T.J. Crowder Over a year ago

@Prady: Not necessarily an id, although that would work. So long as there's a CSS3 selector you can use to identify the table, it doesn't matter whether it's an id selector, a structural selector, etc.

Prady Over a year ago

From your example, what i ideally need is if i select a checkbox all the checkboxes in the selected column to be disabled and all the checkboxes in the selected checkbox row also disabled

Prady Over a year ago

I could understand from your code how to do it for row, can it be done similarly on columns

Phil.Wheeler · Accepted Answer · 2011-02-10 20:04:09Z

1

Ok, so if #chkBox is checked then you want to disable all checkboxes with the class "change" and the one for "sim" on the same row.

$('#chkBox').click(function(){
   var paramChangeBoxes = $('input:checkbox.change');
   if ($(this).is(':checked')) {
      paramChangeBoxes.attr('disabled', 'disabled');
      $('#chkBox1').attr('disabled', 'disabled');
   }
  else {
      paramChangeBoxes.removeAttr('disabled');
      $('#chkBox1').removeAttr('disabled');
   }
});

edited Feb 10, 2011 at 20:04

answered Feb 10, 2011 at 7:42

Phil.Wheeler

16.9k10 gold badges103 silver badges157 bronze badges

2 Comments

Prady Over a year ago

i tried doing this somehow i am not getting it to work. You can see it here jsfiddle.net/prady/VZ4yW

Prady Over a year ago

Got it sorted, there was a missing ')' after checked') in if ($(this).is(':checked') {

Collectives™ on Stack Overflow

Disabling checkboxes based on selection of another checkbox in jquery

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related