JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<table>
  <tr id="some_id_1">
    <td>some_id_1</td>
    <td>some_item</td>
    <td>
      <input type="checkbox" class="1" id="chk_some_id_1" />
    </td>
    <td>
      <input type="text" class="1" id="txt_some_id_1" />
    </td>
  </tr>
  <tr id="some_id_2">
    <td>some_id_2</td>
    <td>some_item</td>
    <td>
      <input type="checkbox" class="1" id="chk_some_id_2" />
    </td>
    <td>
      <input type="text" class="1" id="txt_some_id_2" />
    </td>
  </tr>
  <tr id="some_id_3">
    <td>some_id_3</td>
    <td>some_item</td>
    <td>
      <input type="checkbox" class="0" id="chk_some_id_3" />
    </td>
    <td>
      <input type="text" class="0" id="txt_some_id_3" />
    </td>
  </tr>
</table>

JavaScript

$(function() {
  $('input[type=checkbox]').change(function() {
    if (this.checked) {
      $(this).closest('tr').find('input[type=text]').prop('disabled', true);
    } else {
      $(this).closest('tr').find('input[type=text]').prop('disabled', false);
    }
  });
});