最可靠方式是直接使用disabled属性。它能自动灰化按钮、阻止点击和表单提交，且全浏览器兼容；仅用css模拟禁用不可靠，js操作应使用removeattribute/setattribute，框架中需传布尔值而非字符串。
直接用 disabled 属性最可靠
HTML 按钮禁用最简单、最兼容的方式就是写死 disabled 属性。浏览器会自动灰掉按钮、阻止点击、跳过表单提交，且所有主流浏览器（包括 IE11）都支持。
常见错误是只加样式（比如 opacity: 0.5 或 pointer-events: none），但这不阻止键盘触发（如回车）、不阻断表单提交、也不被屏幕阅读器正确识别。
-
<button disabled>提交</button>—— 静态禁用，页面加载即生效 -
<button disabled>提交</button>—— 等价写法，属性值任意非空字符串都有效 - 不要写
disabled="false"或disabled="0"，这些在 HTML 中仍表示禁用
JavaScript 动态控制时别漏掉移除属性
用 JS 开关禁用状态，核心是操作 disabled 属性本身，而不是设 disabled = false 这种布尔赋值（那只是 DOM 属性，不是 HTML 属性）。
容易踩的坑：用 element.disabled = false 后，按钮看起来可点了，但若原始 HTML 里写了 disabled，这个属性还在，下次重新渲染或服务端直出时可能又生效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 启用按钮：
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>提交</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 状态和防抖。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
