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

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

虽然 readonly 常用于文本输入框以防止编辑但保留焦点和提交值，但它对复选框、单选按钮等布尔型表单控件完全不起作用——浏览器会忽略该属性，复选框仍可被 Tab 键聚焦，并通过空格键切换状态（Chrome、Firefox、Edge 均如此；Safari 因默认不聚焦 readonly 复选框而看似“正常”，实为特例）。

✅ 正确解决方案：使用 disabled 属性
disabled 可有效禁用所有用户交互（包括 Tab 聚焦、空格切换、鼠标点击），且关键的是：在 Angular 等框架中，[(ngModel)] 或 ngModel 绑定的数据仍可双向同步——即 UI 被禁用，但程序逻辑仍能读写 registerAcceptTCs 的值。

修改后的代码如下：

Open LLM Leaderboard

Open LLM Leaderboard是一款AI模型评测工具，Hugging Face 推出的开源大模型排行榜单。

下载

<input class="form-check-input" type="checkbox" id="acceptTCs" name="acceptTCs" required disabled>

⚠️ 注意事项：

• 移除 style="pointer-events: none;"：disabled 已天然禁用指针事件，冗余样式可能干扰可访问性（如屏幕阅读器识别）；
• disabled 元素的值默认不会提交到表单（若需提交，后端或 JS 需额外处理）；但 Angular 模板驱动表单中，ngModel 绑定不受影响；
• 若需视觉上“非禁用态”（如保持灰色背景但不可操作），可通过 CSS 自定义 :disabled 样式，例如：

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

总结：对于受控的复选框（状态由外部逻辑管理），请始终用 disabled 替代 readonly ——这是语义正确、跨浏览器一致、且兼容现代前端框架的最佳实践。