javascript - Disabling checkboxes based on selection of another checkbox in jquery - Stack Overflow

admin管理员组

文章数量:1026989

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 pletion 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 pletion 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 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 pletion 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 pletion 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

• javascript
• jquery

Share Improve this question Follow asked Feb 10, 2011 at 7:23 PradyPrady 11.3k4141 gold badges127127 silver badges177177 bronze badges 1

• 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 Commented Feb 10, 2011 at 7:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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

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 pletion 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 pletion 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 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 pletion 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 pletion 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

• javascript
• jquery

Share Improve this question Follow asked Feb 10, 2011 at 7:23 PradyPrady 11.3k4141 gold badges127127 silver badges177177 bronze badges 1

• 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 Commented Feb 10, 2011 at 7:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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

本文标签： javascriptDisabling checkboxes based on selection of another checkbox in jqueryStack Overflow