
在生成 PDF 等只读场景中,需确保复选框状态固定且用户无法修改;readonly 对 checkbox 无效,应使用 disabled 属性实现真正禁用。
在生成 pdf 等只读场景中,需确保复选框状态固定且用户无法修改;`readonly` 对 checkbox 无效,应使用 `disabled` 属性实现真正禁用。
在 HTML 表单中,readonly 属性不适用于 (或 radio、select 等控件)——它仅对文本类输入项(如 text、email、textarea)生效。若对 checkbox 设置 readonly="readonly",浏览器会忽略该属性,复选框仍可点击切换状态,导致数据不可控,这在生成 PDF 或导出只读文档时尤为危险。
✅ 正确做法是使用 disabled 属性:
- disabled 使控件完全不可交互(灰显 + 阻止点击);
- 提交表单时,disabled 元素的值不会被发送到服务器(注意:若需保留值提交,请改用 th:field 绑定 + 后端逻辑控制,或配合隐藏域);
- 在 Thymeleaf 模板中,推荐使用标准 HTML 属性写法(而非 th:disabled),以确保静态渲染时即生效,尤其适用于 PDF 渲染引擎(如 Flying Saucer / Thymeleaf + iText)。
示例代码(Thymeleaf 模板片段):
<!-- 固定为已勾选且不可编辑(适用于 PDF 输出) -->
<input type="checkbox" id="randomId" checked disabled><!-- 动态绑定:根据后端布尔值控制是否禁用(推荐) --><input type="checkbox" id="termsAccepted" th:checked="${user.acceptedTerms}" th:disabled="${true}">
⚠️ 注意事项:
- 若你依赖 Thymeleaf 的 th:field 绑定(如 th:field="*{active}"),则不能直接加 disabled —— 此时应改用 th:attr="disabled: ${true}",避免属性冲突;
- PDF 渲染工具(如 Flying Saucer)对 disabled 的支持更稳定,而 readonly 可能被完全忽略;
- 如需“视觉上只读但值仍参与提交”,请改用 CSS 禁用交互(如 pointer-events: none;)+ readonly(不推荐,兼容性差),或更稳妥地采用服务端校验 + 前端样式锁定。
总结:对于 checkbox 的只读需求,disabled 是唯一可靠、语义正确且广泛兼容的方案。务必摒弃 readonly 的误用,从语义与渲染一致性出发,确保输出内容(尤其是 PDF)的最终状态可控、可预期。










