Как отключить поля ввода в строке, если установлен флажок?

Question

Я не смог найти решение своей конкретной проблемы, хотя было много тем о подобных проблемах.

Мой код отключает все поля, которые содержит моя таблица, вместо того, чтобы отключать только строку для каждого отмеченного флажка.

  <tr>
    <td><input type="text" name="pageName[]"></td>
    <td>
      <select name="pageSelection[]">
        <option selected>-- Select --</option>
        <option>...</option>
      </select>
    </td>
    <td>
      <input type="text" name="pageData[]">
    </td>
    <td>
      <input type="checkbox" name="disableRow[]">
    </td>
  </tr>
  <tr>
    <td><input type="text" name="pageName[]"></td>
    <td>
      <select name="pageSelection[]">
        <option selected>-- Select --</option>
        <option>...</option>
      </select>
    </td>
    <td>
      <input type="text" name="pageData[]">
    </td>
    <td>
      <input type="checkbox" name="disableRow[]">
    </td>
  </tr>

Мой код jQuery:

$("input:checkbox[name^='disableRow']").on("click", function(){
      $("table tr input:text, table tr select").prop("disabled", this.checked);
});

Я, к несчастью, попытался объединить код ниже:

.has("input:checkbox(:checked)")

Answer 1

Попробуйте:

$(":checkbox").on("change", function() {
   var chx = $(this).is(':checked');
   $(this).closest('tr').find('input:text, select').prop("disabled", chx);
});

1. change событие вместо click.

2. Сохранитесостояние флажка в переменной (т. е. проверено / не проверено).

3. Используйте метод .closest(), чтобы найти tr, в котором флажок вложен в.

4. Из tr используйте .find() для нацеливания на соответствующие элементы.

5. Ссылка на переменную в шаге 2 как значение .prop().

Демо

$(":checkbox").on("change", function() {
  var chx = $(this).is(':checked');
  $(this).closest('tr').find('input:text, select').prop("disabled", chx);
});

<table>
  <tr>
    <td><input type="text" name="pageName[]"></td>
    <td>
      <select name="pageSelection[]">
        <option selected>-- Select --</option>
        <option>...</option>
      </select>
    </td>
    <td>
      <input type="text" name="pageData[]">
    </td>
    <td>
      <input type="checkbox" name="disableRow[]">
    </td>
  </tr>
  <tr>
    <td><input type="text" name="pageName[]"></td>
    <td>
      <select name="pageSelection[]">
        <option selected>-- Select --</option>
        <option>...</option>
      </select>
    </td>
    <td>
      <input type="text" name="pageData[]">
    </td>
    <td>
      <input type="checkbox" name="disableRow[]">
    </td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

В настоящее время ваш код говорит, что каждый ввод в таблице должен быть отключен.Вы должны сузить его до родителя.

Редактировать: добавлена ​​строка, которая по умолчанию отключает флажки и переключается с click на change.

$("input:checkbox[name^='disableRow']").prop("checked", false);

$("input:checkbox[name^='disableRow']").on("change", function(){
      $(this).closest("tr").find("input:text, select").prop("disabled", this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
      <td><input type="text" name="pageName[]"></td>
      <td>
        <select name="pageSelection[]">
          <option selected>-- Select --</option>
          <option>...</option>
        </select>
      </td>
      <td>
        <input type="text" name="pageData[]">
      </td>
      <td>
        <input type="checkbox" name="disableRow[]">
      </td>
    </tr>
    <tr>
      <td><input type="text" name="pageName[]"></td>
      <td>
        <select name="pageSelection[]">
          <option selected>-- Select --</option>
          <option>...</option>
        </select>
      </td>
      <td>
        <input type="text" name="pageData[]">
      </td>
      <td>
        <input type="checkbox" name="disableRow[]">
      </td>
    </tr>
 </table>