如何让只读复选框在提交表单时仍保留 true 值-html教程-PHP中文网

如何让只读复选框在提交表单时仍保留 true 值

通过阻止默认点击行为而非禁用复选框，可实现视觉上不可更改、但提交时仍携带 checked 状态的“伪只读”效果，避免修改后端逻辑与条件规则。

通过阻止默认点击行为而非禁用复选框，可实现视觉上不可更改、但提交时仍携带 `checked` 状态的“伪只读”效果，避免修改后端逻辑与条件规则。

在表单系统（如 FormAssembly）中，当某个复选框（例如 tfa_11）需强制为 true 且禁止用户修改时，直接使用 disabled = true 会导致该字段不参与表单提交——这会破坏已配置的条件显示逻辑、连接器判断及后端处理流程。

正确解法是：保持字段启用状态（enabled），但拦截并阻止其交互行为。具体做法是为复选框绑定 click 事件监听器，并调用 event.preventDefault()，从而取消勾选/取消勾选的切换动作，同时保留其初始 checked 状态和表单序列化能力。

✅ 推荐实现代码如下：

document.addEventListener('DOMContentLoaded', function() {
  const checkbox = document.getElementById('tfa_11');
  if (checkbox) {
    // 确保初始状态为 checked（服务端或HTML中已设）
    checkbox.checked = true;
    // 阻止任何点击导致的状态变更
    checkbox.addEventListener('click', function(e) {
      e.preventDefault();
    });
  }
});

⚠️ 注意事项：

HTML 中必须显式设置 checked 属性（如 <input type="checkbox" id="tfa_11" checked>），否则即使 JS 设置 checkbox.checked = true，若页面重载或渲染顺序异常，仍可能丢失初始值；
不要混用 disabled 和 preventDefault() —— disabled 会彻底排除字段于 FormData 之外，而 preventDefault() 仅抑制交互，字段仍参与提交；
此方案兼容所有依赖该字段值的条件逻辑（如 FormAssembly 的显示规则、计算字段、Webhook 映射等），因字段 DOM 节点未被隐藏或替换，ID 和值均保持原样；
如需增强用户体验，可额外添加 CSS 样式（如 cursor: not-allowed; opacity: 0.8;）提示用户该选项不可操作。