如果选中复选框，如何禁用每行的输入字段？

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>