禁用只读复选框的空格键切换

在 HTML 中，readonly 属性对 无效，无法阻止空格键触发切换；正确做法是使用 disabled 属性，它能彻底禁用键盘与鼠标交互，同时保持绑定数据的响应性（如 Angular 的 [(ngModel)] 仍可更新）。

readonly 对复选框无效：浏览器行为不一致

先说结论：readonly 这个属性，在复选框（checkbox）面前，基本就是个摆设。你给复选框加上了 readonly，以为它就能像文本输入框一样“只读不可改”，但浏览器并不买账——它照样能被 Tab 键聚焦，空格键一按，状态照样切换。这在 Chrome、Firefox、Edge 上表现一致；Safari 因为默认不聚焦只读复选框，看起来“正常”，但只是个特例，靠不住。

正确的解决方案：使用 disabled 属性

所以，真正的解决方案是 disabled。这个属性从根上砍掉了所有用户交互：Tab 聚焦、空格切换、鼠标点击，统统失效。而且，关键的一点是：在 Angular 这类框架中，[(ngModel)] 绑定的数据依然可以双向同步。也就是说，UI 上复选框看起来是灰色的、不可操作的，但程序逻辑仍然可以读写它的值。

代码示例：禁用复选框并保持数据绑定

修改后的代码很直接：

注意事项：避免样式干扰与表单提交问题

这里有几个容易踩的坑，值得注意：

• 如果你之前为了“禁用”效果，顺手加了 style="pointer-events: none;"，建议去掉。因为 disabled 本身已经天然禁用了指针事件，再叠一层冗余样式，反而可能干扰屏幕阅读器这类辅助工具的正常识别。
• 另外，disabled 的元素默认不会随表单提交。如果你后端需要这个值，得额外处理。但 Angular 的模板驱动表单里，ngModel 绑定不受影响，数据依然可以正常读取和更新。
• 如果嫌 disabled 默认的灰色样式太丑，想保留一种“看似可用但实则不可操作”的视觉效果，完全可以通过 CSS 自定义 :disabled 样式，比如：

.form-check-input:disabled { opacity: 0.8; cursor: default; }

总结：disabled 是语义正确且兼容性最佳的选择

说到底，对于由外部逻辑控制状态的复选框，disabled 才是语义正确、跨浏览器兼容、且能无缝对接现代前端框架的最佳选择。用 readonly 去管复选框，纯属白费力气。