React中如何实现只读checkbox，禁止点击切换选中状态？

1. 你提到的 onclick="return false" 原生方案在React中的适配 #

原生写法中onclick="return false"的作用是阻止点击后的默认切换行为，在React的合成事件体系中不能直接返回false实现，改为在onClick回调中调用事件的preventDefault方法即可：

<label className="checkbox">
  <input 
    type="checkbox"
    onClick={(e) => e.preventDefault()}
    {/* 可以搭配checked属性设置固定的选中状态 */}
    checked={true /* 替换为你的实际业务值 */}
  />
</label>

如果同时需要阻止点击事件向上冒泡，可以额外加e.stopPropagation()。

2. 其他可选实现方案 #

• 受控组件拦截变更（最推荐，适配React数据流逻辑）
  将checkbox设为受控组件，固定checked属性的取值，onChange回调不做任何状态更新操作，即可实现状态不可变更：

  import { useState } from 'react';
  
  function Demo() {
    // 该状态值不会被点击操作修改
    const [isChecked, setIsChecked] = useState(false);
    return (
      <label className="checkbox">
        <input 
          type="checkbox"
          checked={isChecked}
          onChange={() => {}}
        />
      </label>
    )
  }
  

• 添加disabled属性（最简单，适合无表单提交、无自定义样式要求的场景）
  直接给checkbox添加disabled属性即可禁止点击切换，缺点是默认有灰化的禁用样式，且表单提交时不会携带该字段的值，样式可以通过CSS自定义修改：

  <label className="checkbox">
    <input 
      type="checkbox"
      disabled
      checked={true /* 替换为你的实际业务值 */}
    />
  </label>
  

• CSS 禁止鼠标事件
  给checkbox或外层label添加pointer-events: none样式，即可拦截所有鼠标交互事件，实现只读效果：

  <label className="checkbox">
    <input 
      type="checkbox"
      style={{ pointerEvents: 'none' }}
      checked={true /* 替换为你的实际业务值 */}
    />
  </label>
  

  注意：该方案会同时拦截hover、右键点击等所有鼠标事件，如果label内有其他需要响应鼠标操作的元素，不要给外层label加该样式，仅给input添加即可。

注意：原生input checkbox不支持readonly属性，直接添加readonly不会生效，不要用该属性实现只读需求。

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