真正不可点击的按钮必须用原生disabled属性，因其能自动阻止点击、跳过Tab聚焦、不提交表单，且被屏幕阅读器正确识别；仅CSS无法拦截键盘操作与表单提交。
真正不可点击的按钮，必须用原生 disabled 属性；只靠 CSS 样式（比如 pointer-events: none 或透明度）根本拦不住键盘操作、表单提交和屏幕阅读器交互。
为什么 button 加了 disabled 才算真禁用
浏览器对 disabled 属性有硬性行为约定：它会自动做三件事——阻止鼠标点击、跳过 Tab 键聚焦、不提交表单值。这些不是 JS 模拟出来的，而是 DOM 层面的语义拦截。
-
disabled是布尔属性，写成<button disabled>提交</button>就生效，不用赋值；disabled="false"反而会禁用（非空字符串即为 true） - JS 动态控制时，直接设
btn.disabled = true或btn.disabled = false，别用setAttribute/removeAttribute—— 后者在旧 Safari 中可能不同步，且btn.hasAttribute('disabled')才是判断是否真禁用的可靠方式 - 表单内
<button type="submit" disabled>点击或按 Enter 都不会触发表单提交，这点比监听click事件更底层、更可靠
button:disabled 样式为什么没反应
不是你 CSS 写错了，而是浏览器对 :disabled 有默认压制逻辑，会覆盖部分继承样式（比如 color、background-color、cursor），尤其在 Chrome 和 Safari 中明显。
- 必须显式重置关键属性：
color、background-color、border-color、cursor、opacity；别依赖简写或 transition - 选中器要用
button:disabled，而不是button[disabled]—— 后者无法匹配 JS 动态设置的disabled状态 -
cursor: not-allowed在原生disabled按钮上常被忽略，因为浏览器强制使用系统禁用光标；如需自定义光标，得改用aria-disabled="true"+ 手动事件拦截（见下一条）
什么时候该用 aria-disabled 而不是 disabled
仅当无法修改 DOM 结构或受限于第三方组件时才考虑 aria-disabled，它本身不阻止交互，纯属语义提示，必须配合 JS 拦截和 CSS 控制。
立即学习“前端免费学习笔记（深入）”；
- 不要混用：
<button disabled aria-disabled="true">是冗余甚至有害的——读屏软件可能重复播报或优先采信 ARIA 属性，掩盖原生语义 - 正确做法：移除
disabled，加aria-disabled="true"和自定义 class（如btn--disabled），再用 JS 拦截click、keydown（Enter/Space），并手动设tabindex="-1" -
pointer-events: none要慎用——它会让子元素（图标、tooltip）也失效；若需保留内部交互，得给子元素单独设pointer-events: auto
最易被忽略的点：禁用状态必须同步处理失败恢复。异步请求里如果只在 .then() 里设 disabled = false，出错就永远卡住；所有 .catch() 和 .finally() 分支都得包含恢复逻辑。
