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

Question

虽然有很多关于类似问题的主题，但我找不到解决我的特定问题的方法。

我的代码禁用了我 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>

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

目前您的代码表明 table 中的每个输入都应该被禁用。您必须将范围缩小到父级。

编辑：添加了一行禁用默认复选框并从 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>

Answer 2

尝试：

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

change 事件而不是 click.
将复选框的状态存储在变量中（即 checked/unchecked）。
使用.closest()方法找到复选框所在的tr。
从 tr 使用 .find() 定位适用元素。
将步骤 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>

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

How to disable input fields per row if its checkbox is checked?

html

checkbox

jquery

disabled-input

演示