勾选指定checkbox时如何禁用同一行多个checkbox与textarea？

解决方案 #

你之前用getElementsByClassName调试失败和输入元素类型无关，是因为该方法返回的是类数组的元素集合，不能直接对整个集合设置disabled属性，需要遍历每个元素单独设置。下面是可直接复用的通用方案：

1. 修改行首触发checkbox的事件参数 #

将你现有行首checkbox的onchange属性修改为传入元素本身：

<input name="aaa" onchange="disableRowInputs(this)" type="checkbox" />

2. 新增通用禁用函数 #

页面任意位置添加这段JS即可，所有表格行都可以复用，不需要单独给每行写逻辑：

function disableRowInputs(triggerCheckbox) {
  // 定位到当前checkbox所在的表格行
  const currentRow = triggerCheckbox.closest('tr');
  // 选中当前行内所有input、textarea元素
  const rowInputs = currentRow.querySelectorAll('input, textarea');
  // 遍历所有元素，跳过触发用的第一个checkbox，其他同步禁用状态
  rowInputs.forEach((item, index) => {
    if (index !== 0) {
      item.disabled = triggerCheckbox.checked;
    }
  })
}

完整可运行示例 #

<table>
  <!-- 表格行1 -->
  <tr>
    <td style="vertical-align:middle;text-align: center;">
      <input name="row1_check" onchange="disableRowInputs(this)" type="checkbox" />
    </td>
    <td style="vertical-align:middle;text-align: center;">
      <input name="row1_opt1" type="checkbox" />
    </td>
    <td style="vertical-align:middle;text-align: center;">
      <textarea name="row1_remark" rows="3"></textarea>
    </td>
  </tr>
  <!-- 表格行2 直接复用相同逻辑 -->
  <tr>
    <td style="vertical-align:middle;text-align: center;">
      <input name="row2_check" onchange="disableRowInputs(this)" type="checkbox" />
    </td>
    <td style="vertical-align:middle;text-align: center;">
      <input name="row2_opt1" type="checkbox" />
    </td>
    <td style="vertical-align:middle;text-align: center;">
      <textarea name="row2_remark" rows="3"></textarea>
    </td>
  </tr>
</table>

<script>
function disableRowInputs(triggerCheckbox) {
  const currentRow = triggerCheckbox.closest('tr');
  const rowInputs = currentRow.querySelectorAll('input, textarea');
  rowInputs.forEach((item, index) => {
    if (index !== 0) {
      item.disabled = triggerCheckbox.checked;
    }
  })
}
</script>

如果有不需要参与禁用的输入元素，只要修改querySelectorAll的选择器，或者在遍历的时候加额外判断条件即可。

内容的提问来源于stack exchange，提问作者curiouslyuncurious