Question

I have a problem disabling/enabling a set of checkboxes based on one single checkbox button. I’m using struts 2 with JQuery. I have 9 checkboxes:

<tr>
  <td><s:checkbox id="chkMain" name="Anywhere"/><s:property value="getPositionLabel('ANYWHERE')" /></td>
</tr>
<tr>
  <td><s:checkbox name="system"/><s:property value="getPositionLabel('SYSTEM')" /></td>             
  <td><s:checkbox name="author"/><s:property value="getPositionLabel('AUTHER')" /></td>
</tr>
<tr>
  <td><s:checkbox name="function"/><s:property value="getPositionLabel('FONCTION')" /></td>
  <td><s:checkbox name="reference"/><s:property value="getPositionLabel('REFERENCE')" /></td>
</tr>
<tr>
  <td><s:checkbox name="constructor"/><s:property value="getPositionLabel('CONSTRUCTOR')" /></td>                                                     
  <td><s:checkbox name="content"/><s:property value="getPositionLabel('CONTENT')" /></td>
</tr>
<tr>
  <td><s:checkbox name="materiel"/><s:property value="getPositionLabel('MATERIEL')" /></td>
  <td><s:checkbox name="title"/><s:property value="getPositionLabel('TITLE')" /></td> 
  <td>&nbsp;</td>
</tr>

When the checkbox button “Anywhere” is selected, all the other checkboxes are disabled.
and when it is de-selected, then all the other checkboxes are enabled.

How can this behaviour be acheived using jquery?

Answer 1

Something like this:

$("#chkMain").click(function() {
    $('input[type="checkbox"]').not(this).prop("disabled", this.checked);
});

That is, when chkMain is clicked, select all the checkboxes on the page except that one and set their disabled property to matched the checked status of chkMain.

If you have other checkboxes on the page that should not be part of this functionality you’d need to make the selector more specific, e.g., if the relevant ones are all in some containing object such as that table:

$('#idOfTable input[type="checkbox"]').not(this).prop("disabled", this.checked);

Or you could give them all a common class, in which case you could omit the .not(this) part:

$('input.someClass').prop("disabled", this.checked);