Wahid Masud Wahid Masud - 6 months ago 21
jQuery Question

interaction between html checkboxes via jquery

I have an HTML table that has a lot of columns, but the first two columns are 'Yes' and 'No' columns. By default the 'Yes' column is checked and 'No' column is unchecked. What I want is, If I uncheck the 'Yes' column then the 'No' column will get checked and all the other columns will be disabled. If I again click/check the 'Yes' column then the 'No' column will get unchecked and all the other columns will be enabled again.

Everything is working fine, but the problem is when the second time I click on the 'Yes' box, it should be back to 'checked' again but it isn't. Here is a sample of

.



$('tr td input[type="checkbox"].yes').click(function() {
$(this).closest('tr').find(":input:not(.yes, .no)").prop('disabled', !this.checked);
$(this).closest('tr').find(":input(.no)").prop('checked', !this.checked);
});

table {
border-collapse: collapse;
}

table,
th,
td {
border: 1px solid black;
padding: 2px;
}

table,
th,
td {
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th>Yes</th>
<th>No</th>
<th>Text</th>
<th>Select</th>
<th>textinput</th>
<th>Select 2</th>
</tr>
<tr>
<td>
<input class="yes" type="checkbox" checked/>
</td>
<td>
<input class="no" type="checkbox" />
</td>
<td>
<input type="text" value="1111" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
<td>
<input type="text" value="AAAAA" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="yes" type="checkbox" checked/>
</td>
<td>
<input class="no" type="checkbox" />
</td>
<td>
<input type="text" value="2222" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
<td>
<input type="text" value="BBBB" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="yes" type="checkbox" checked/>
</td>
<td>
<input class="no" type="checkbox" />
</td>
<td>
<input type="text" value="3333" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
<td>
<input type="text" value="CCCC" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
</tr>
</table>




Answer

I see Two problems with your code.

  1. ...find(":input(.no)")... should be just ...find(":input.no")...
  2. .attr() is buggy with disabled="true" v/s disabled="disabled", use .prop() in cases to truth value checks.

$('tr td input[type="checkbox"].yes').change( function() {
   $parentTr = $(this).closest('tr');
   $parentTr.find(":input:not(.yes, .no)").prop('disabled', !this.checked);
   $parentTr.find(":input.no").prop('checked', !this.checked);
});

Updated Fiddle

$('tr td input[type="checkbox"].yes').change( function() {
   $(this).closest('tr').find(":input:not(.yes, .no)").prop('disabled', !this.checked);
   $(this).closest('tr').find(":input.no").prop('checked', !this.checked);
});
table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
    padding: 2px;
}

table, th, td {
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
  <tr>
    <th>Yes</th>
    <th>No</th>
    <th>Text</th>
    <th>Select</th>
    <th>textinput</th>
    <th>Select 2</th>
  </tr>
  <tr>
    <td><input class="yes" type="checkbox" checked/></td>
    <td><input class="no" type="checkbox"/></td>
    <td><input type="text" value="1111"/></td>
    <td><select><option>A</option><option>B</option></select></td>
    <td><input type="text" value="AAAAA"/></td>
    <td><select><option>A</option><option>B</option></select></td>
  </tr>
  <tr>
    <td><input class="yes" type="checkbox" checked/></td>
    <td><input class="no" type="checkbox"/></td>
    <td><input type="text" value="2222"/></td>
    <td><select><option>A</option><option>B</option></select></td>
    <td><input type="text" value="BBBB"/></td>
    <td><select><option>A</option><option>B</option></select></td>
  </tr>
  <tr>
    <td><input class="yes" type="checkbox" checked/></td>
    <td><input class="no" type="checkbox"/></td>
    <td><input type="text" value="3333"/></td>
    <td><select><option>A</option><option>B</option></select></td>
    <td><input type="text" value="CCCC"/></td>
    <td><select><option>A</option><option>B</option></select></td>
  </tr>
</table>

Also, a more better way of handling clicks on no - Fiddle