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 jsfiddle.net/1rhrco48/5 — Mohammad
– Mohammad, Commented May 28, 2016 at 8:11
if you only required functionality you can use radio box, is check box important? — Talha Habib
– Talha Habib, Commented May 28, 2016 at 8:21

Community · Accepted Answer · 2017-05-23 12:24:02Z

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

Abhishek Singh · Accepted Answer · 2016-05-28 08:22:42Z

0

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/

answered May 28, 2016 at 8:22

Abhishek Singh

3692 silver badges17 bronze badges

Collectives™ on Stack Overflow

interaction between html checkboxes via jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related