CODEWITHSUNDEEP
javascriptjqueryhtml
Wahid Masud
Wahid Masud

Reputation: 1093

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

Upvotes: 0

Views: 253

Answers (2)

Shaunak D
Shaunak D

Reputation: 20636

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

Upvotes: 3

Abhishek Singh
Abhishek Singh

Reputation: 369

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/

Upvotes: 0

Related Questions