javascript - 使复选框只读

Question

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

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

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

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

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

Answer 1

如果您想永久禁用此复选框，您只需要添加 disabled 属性，如下所示：

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

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

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

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

Answer 2

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

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，并更改输入样式，使其明显被禁用。