最可靠方式是直接使用disabled属性。它能自动灰化按钮、阻止点击和表单提交，且全浏览器兼容；仅用CSS模拟禁用不可靠，JS操作应使用removeAttribute/setAttribute，框架中需传布尔值而非字符串。
直接用 disabled 属性最可靠
HTML 按钮禁用最简单、最兼容的方式就是写死 disabled 属性。浏览器会自动灰掉按钮、阻止点击、跳过表单提交，且所有主流浏览器（包括 IE11）都支持。
常见错误是只加样式（比如 opacity: 0.5 或 pointer-events: none），但这不阻止键盘触发（如回车）、不阻断表单提交、也不被屏幕阅读器正确识别。
-
<button disabled>提交</button>—— 静态禁用，页面加载即生效 -
<button disabled="disabled">提交</button>—— 等价写法，属性值任意非空字符串都有效 - 不要写
disabled="false"或disabled="0"，这些在 HTML 中仍表示禁用
JavaScript 动态控制时别漏掉移除属性
用 JS 开关禁用状态，核心是操作 disabled 属性本身，而不是设 disabled = false 这种布尔赋值（那只是 DOM 属性，不是 HTML 属性）。
容易踩的坑：用 element.disabled = false 后，按钮看起来可点了，但若原始 HTML 里写了 disabled，这个属性还在，下次重新渲染或服务端直出时可能又生效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 启用按钮：
btn.removeAttribute('disabled')（推荐）或btn.disabled = false - 禁用按钮：
btn.setAttribute('disabled', '')或btn.disabled = true - 检查是否禁用：
btn.hasAttribute('disabled')比btn.disabled更准确，尤其在初始有disabled的情况下
React/Vue 等框架里注意属性绑定写法
框架会把 disabled 当作受控 prop 处理，但逻辑和原生一致：值为真（true、非空字符串）即禁用，为假（false、null、undefined）即启用。
常见错误是传字符串 "false" —— 这在 HTML 中仍是真值，按钮依然禁用。
- React：
<button disabled={isSubmitting}>提交</button>，确保isSubmitting是布尔值 - Vue：
<button :disabled="isSaving">保存</button>，同理，别写:disabled="'false'" - SSR 场景下，若服务端首次渲染时
disabled为true，客户端 hydration 必须保持一致，否则 React 会警告并可能覆盖状态
禁用状态要配合视觉反馈和可访问性
仅靠 disabled 属性不够。默认样式在不同浏览器中差异大（比如 Safari 不降 opacity），且屏幕阅读器可能读不出“已禁用”，需要额外处理。
- 加 CSS 强制统一样式：
button:disabled { opacity: 0.6; cursor: not-allowed; } - 对辅助技术更友好：禁用时加上
aria-disabled="true"（注意不是替代disabled，而是补充） - 如果按钮逻辑复杂（比如禁用取决于多个条件），别把判断逻辑塞进模板，提前算好布尔值再传给
disabled
disabled 状态同步，以及禁用期间用户误操作（比如快速连点）导致的状态竞争——这时候光靠属性不够，得结合 loading 状态和防抖。 
