唯一既生效、又无障碍、还免维护的方案是直接加disabled属性并用button:disabled写样式；其他绕路写法会在键盘导航、表单提交或读屏软件中出问题。
直接加 disabled 属性，再用 button:disabled 写样式——这是唯一既生效、又无障碍、还免维护的方案。其他绕路写法（比如只加 class、只设 pointer-events: none）都会在键盘导航、表单提交或读屏软件中出问题。
button:disabled 样式为什么没生效？
常见原因不是 CSS 写错了，而是 HTML 或 JS 没到位：
-
button元素上根本没渲染出disabled属性——Vue/React 组件没透传 props，或 JSX 里写了disabled={isLoading ? true : false}却漏了 falsy 值处理 - 用了
button[disabled]却没写button:disabled，导致 JS 动态设el.disabled = true后样式不更新（因为属性没变） - Safari 对
type="submit"按钮的:disabled支持偏弱，cursor: not-allowed容易被忽略，得加!important - 行内样式如
style="cursor: pointer"优先级高于button:disabled，必须用更具体选择器或!important覆盖
禁用按钮该设哪些 CSS 属性？
不能只靠 opacity: 0.5 ——它会把边框、阴影、图标全压暗，还破坏 WCAG 对比度要求。重点控制三项：
-
color和background-color分开调：比如color: #999+background-color: #f0f0f0，确保文字对比度 ≥ 4.5:1 -
cursor: not-allowed必须写在button:disabled规则里，单独写button { cursor: not-allowed }会污染所有按钮 - 显式关掉悬停/焦点动效：
button:disabled:hover, button:disabled:focus里清空box-shadow、transform等，避免视觉误导
JS 动态控制 disabled 时容易踩什么坑？
DOM 层面的开关逻辑很简单，但和框架、事件、可访问性一结合就容易翻车：
-
el.disabled = true是唯一可靠写法；setAttribute('disabled', 'false')没用，removeAttribute('disabled')才是启用 - 禁用后用户仍可能 Tab 到该按钮——要手动
el.nextElement.focus()把焦点移走，否则键盘用户卡住 - React/Vue 中仅改 data/state 不等于 DOM 更新完成，得等 re-render 后再操作
disabled，否则被下次渲染覆盖 - 屏幕阅读器依赖
aria-disabled="true"辅助播报，尤其当按钮文本动态变化时，建议同步设置
最常被忽略的点是：禁用按钮的语义状态和视觉样式必须由同一源头驱动——也就是 disabled 属性本身。任何用 class 模拟、用 pointer-events 遮盖、或靠 JS 临时拦截 click 的做法，都会在键盘操作、表单提交、辅助技术场景下暴露缺陷。
