JavaScript 批量提交多組表單數據：隱藏域動態控制 readonly 屬性方案

場景描述

頁面包含多行數據，每行前有複選框，點擊提交時需將勾選行的多組隱藏字段數據批量發送到後台。

核心思路：readonly 控制提交

1. 每行數據對應一組同名 input 隱藏域，初始設置 readonly 屬性（不隨表單提交）
2. 行首複選框 change 事件中，移除/添加該行所有隱藏域的 readonly
3. 提交時，只有未設置 readonly 的同名字段會被序列化為數組發送

關鍵代碼

// HTML 結構示例
<tr>
  <td><input type="checkbox" class="row-select"></td>
  <td><input type="hidden" name="id" value="1" readonly></td>
  <td><input type="hidden" name="name" value="Item1" readonly></td>
</tr>

// jQuery 邏輯
$('.row-select').change(function() {
  var $row = $(this).closest('tr');
  var readonly = !this.checked;
  $row.find('input[type="hidden"]').prop('readonly', readonly);
});

// 後台接收 (Spring MVC 示例)
@PostMapping("/batch")
public void handle(@RequestParam("id") String[] ids,
                   @RequestParam("name") String[] names) {
  // ids[0] 對應第一行勾選項，names[0] 同理
}

替代方案：JS 拼接 JSON

var payload = [];
$('.row-select:checked').each(function() {
  var $row = $(this).closest('tr');
  payload.push({
    id: $row.find('[name="id"]').val(),
    name: $row.find('[name="name"]').val()
  });
});
$.post('/batch', { data: JSON.stringify(payload) });

方案選型建議

• readonly 方案：零依賴、利用原生表單提交、後台接收簡單（數組參數）
• JSON 方案：結構清晰、支持巢狀數據、需後台解析 JSON