Thymeleaf循环生成的动态输入框无法全部禁用问题求助

问题根源 #

你当前代码里，循环生成的每一行输入框都用了重复的id="quantity_in"和id="unit_price"，但HTML规范要求id必须唯一，所以getElementById只会找到页面上第一个匹配的元素，自然只有第一行输入框会被禁用。

修复步骤 #

1. 调整HTML代码（推荐：依赖类选择器，去掉重复id）

不需要给每个输入框加重复id，直接用已有的类名即可：

<tr th:each="StockinReport,iStat:${listStockinReport.getStockinDetail()}" name="line_items">
  <td>
    <input type="text" class="form-control quantity_in" name="quantity_in">
  </td>
  <td>
    <input type="text" class="form-control unit_price" name="unit_price">
  </td>
</tr>

如果一定要保留id，可以用Thymeleaf的索引生成唯一id（后续JS处理稍繁琐）：

<input type="text" class="form-control quantity_in" name="quantity_in" th:id="'quantity_in_' + ${iStat.index}">
<input type="text" class="form-control unit_price" name="unit_price" th:id="'unit_price_' + ${iStat.index}">

2. 修改JavaScript代码，批量禁用所有输入框

用document.querySelectorAll选中所有目标元素，遍历设置禁用属性：

// 选中所有quantity_in类的输入框并禁用
document.querySelectorAll('.quantity_in').forEach(input => {
  input.disabled = true;
});

// 选中所有unit_price类的输入框并禁用
document.querySelectorAll('.unit_price').forEach(input => {
  input.disabled = true;
});

也可以按表格行批量处理（确保每行输入框对应）：

document.querySelectorAll('tr[name="line_items"]').forEach(row => {
  row.querySelector('.quantity_in').disabled = true;
  row.querySelector('.unit_price').disabled = true;
});

额外提示 #

如果需要页面加载完成后立即禁用，要把JS代码放在页面底部，或者用DOMContentLoaded事件包裹，确保DOM已渲染完成：

document.addEventListener('DOMContentLoaded', function() {
  // 禁用代码写在这里
});

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