interaction between html checkboxes via jquery

Question

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 My Code.

$('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>

You can use one checkbox instead of two. See https://jsfiddle.net/1rhrco48/5/ — Mohammad, May 28 '16 at 08:11
if you only required functionality you can use radio box, is check box important? — Talha Habib, May 28 '16 at 08:21

score 3 · Accepted Answer · edited May 23 '17 at 12:24

I see Two problems with your code.

...find(":input(.no)")... should be just ...find(":input.no")...
.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

score 0 · Answer 2 · answered May 28 '16 at 08:22

Just change your javascript to:

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

Check working fiddle: https://jsfiddle.net/4d5k0ams/

interaction between html checkboxes via jquery

2 Answers2