使复选框只读答案

【问题标题】：Make checkBox read only使复选框只读
【发布时间】：2021-11-19 16:01:13
【问题描述】：

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

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

我阅读了一篇建议此解决方法的帖子：

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

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

【问题讨论】：

我的反应不是很大，但是您是否尝试过设置禁用属性？即
是的，我试过这种方式 --> disabled={true} .. 但我不想改变风格，希望有一种可能，我只能禁用点击功能
你的标题和你的问题内容有区别。如果您想禁用该框（单击它不会执行任何操作 - 将 disabled 设置为 true）您不能切换选中状态因为它已被禁用。
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript html reactjs checkbox

【解决方案1】：

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

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

【讨论】：

我更改了函数，因为我想让它永远不可点击并且它可以工作：function onCheckboxClick(e) { e.preventDefault();返回假； }
@Davidbo123321 - 很好，或者干脆做<input type="checkbox" disabled /> 这也会禁用它。如果您认为答案正确，请记住将其标记为正确。

【解决方案2】：

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

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

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

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

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

【讨论】：