如何在Thymeleaf/HTML表单中遍历通用fieldset并批量禁用？

问题根源 #

HTML中id是唯一标识，不能重复用于多个元素。你当前用同一个id="fieldset_id"创建多个fieldset，jQuery只会匹配第一个元素，导致后续添加的无法被禁用。

方案1：使用jQuery处理（适合前端动态添加的fieldset） #

1. 修改HTML：将id改为class
   把重复的id替换为类名，比如dynamic-fieldset：

   <fieldset class="dynamic-fieldset">
     <div>
       <label> Field 1</label>
       <div>
         <input type="text" class="" th:field="*{array[__${Stat.index}__].name}" />
       </div>
     </div>
     <!-- 其他表单元素保持不变 -->
   </fieldset>
   

2. 修改jQuery代码：选中所有对应类的元素
   使用类选择器匹配所有fieldset，批量设置禁用属性：

   if (condition) {
     // 选中所有拥有dynamic-fieldset类的fieldset并禁用
     $('.dynamic-fieldset').prop('disabled', true);
   }
   

3. 动态添加后的处理
   如果是通过JS动态新增fieldset，在添加完成后重新执行上述禁用逻辑即可，比如：

   // 示例：动态添加fieldset的函数
   function addFieldset() {
     const newFieldset = `<fieldset class="dynamic-fieldset">...</fieldset>`;
     $('#form-container').append(newFieldset);
     // 添加后检查条件并禁用
     if (condition) {
       $('.dynamic-fieldset').prop('disabled', true);
     }
   }
   

方案2：使用Thymeleaf处理（适合服务器端渲染的fieldset） #

如果这些fieldset是通过Thymeleaf遍历后端数据生成的，可以直接在渲染时通过条件属性设置禁用：

<!-- 假设后端传入了名为arrayList的集合 -->
<div th:each="item, stat : ${arrayList}">
  <fieldset class="dynamic-fieldset" th:disabled="${condition}">
    <div>
      <label> Field 1</label>
      <div>
        <input type="text" th:field="*{array[__${stat.index}__].name}" />
      </div>
    </div>
    <!-- 其他表单元素 -->
  </fieldset>
</div>

注意：Thymeleaf仅在服务器渲染页面时生效，前端动态添加的fieldset无法通过这种方式控制，仍需用jQuery处理。

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