使复选框只读

Question

我想要一个只读复选框，并在单击该复选框时禁用切换（选中/未选中）。我有哪些可能性？这是我的代码：

<label className="checkbox">
  <input type="checkbox"/>
</label>

我读了一篇文章，其中提出了此解决方法：

<input type="checkbox" onclick="return false" />

...但是我如何在 React 中使用它？

Answer 1

如果你想让这个复选框永远禁用，你只需要添加禁用属性，如下所示：

<input type="checkbox" disabled onclick="return false"/>

但是如果你想控制这个禁用属性，你应该通过 useState() 创建一个新的布尔状态，然后将值传递给禁用属性，如下所示：

const [isDisabled, setIsDisabled] = useState(true);

return (
<input type="checkbox" disabled={isDisabled} onclick="return false"/>
)

Answer 2

我不认为上述答案是正确的。

禁用属性将隐藏屏幕阅读器的输入，可能会违反可访问性规则。因此，使用屏幕阅读器的用户甚至不知道输入的存在，这可能有一些重要的上下文。

遗憾的是，我没有看到支持 readOnly attr，因此您需要对输入进行样式设置和控制，类似于上面的 @Newbie 示例，您可以在其中控制单击事件的功能 - 并且可能还需要一个条件来动态设置样式。

Answer 3

假设您有此变量来控制复选框是否启用/禁用

const [isCheckboxDisabled, setCheckboxDisabled] = useState(false);

您可以通过

disabled

属性禁用该复选框，例如：

<input type="checkbox" disabled={isCheckboxDisabled} />

或者使用您找到的解决方法

<input type="checkbox" onclick="onCheckboxClick" />

function onCheckboxClick(e) {
   if (this.isCheckboxDisabled) {
      e.preventDefault();
      return false;
   }
}

我建议第一种策略，因为它符合 ARIA 标准，并更改输入样式，因此它明显被禁用。