如何禁用只读HTML复选框的空格键切换功能？

我们有一批设置了readonly属性的HTML复选框，它们的选中状态由外部数据源控制（示例中用Angular的[(ngModel)]绑定）。现在遇到个问题：除Safari外的所有浏览器里，这些复选框能被Tab键聚焦，按下空格键还会切换选中状态，这完全不符合需求（Safari里只读复选框没法聚焦，所以没这问题）。示例代码如下：

<input
  class="form-check-input"
  style="pointer-events: none;"
  type="checkbox"
  [(ngModel)]="registerAcceptTCs"
  id="acceptTCs"
  name="acceptTCs"
  required
  readonly>

给你几个可行的解决办法：

方法1：移除Tab聚焦能力（推荐） #

给复选框添加tabindex="-1"属性，直接让它无法被Tab键选中聚焦，从根源上避免空格键触发切换的问题：

<input
  class="form-check-input"
  style="pointer-events: none;"
  type="checkbox"
  [(ngModel)]="registerAcceptTCs"
  id="acceptTCs"
  name="acceptTCs"
  required
  readonly
  tabindex="-1">

tabindex="-1"只会移除元素的Tab聚焦权限，不会影响其他功能，也不会改变表单提交时的行为，非常适合这种场景。

方法2：保留聚焦但阻止空格键行为 #

如果需要让复选框仍能被聚焦，只是禁用空格键的切换功能，可以直接监听空格键按下事件，阻止它的默认行为（以Angular为例）：

<input
  class="form-check-input"
  style="pointer-events: none;"
  type="checkbox"
  [(ngModel)]="registerAcceptTCs"
  id="acceptTCs"
  name="acceptTCs"
  required
  readonly
  (keydown.space)="$event.preventDefault()">

这样就算复选框被聚焦，按下空格键也不会触发选中状态的切换。

额外说明：别轻易用disabled替代 #

可能有人会想到用disabled属性代替readonly，但两者有明显区别：disabled的复选框会变灰，且表单提交时不会携带该字段的值；而readonly的复选框样式正常，提交时会保留绑定的值。如果你的场景需要提交这个值，就别用disabled。

内容的提问来源于stack exchange，提问作者WhatsThePoint