button:disabled没生效的主因是作用于非原生可禁用元素（如div/span）或JS错误设置disabled属性；正确做法是移除属性、配合aria-disabled、opacity+cursor+pointer-events+行为层拦截实现语义与交互闭环。
button:disabled 为什么没生效？
最常见的原因是：你给的不是 <button></button>、<input> 或 <select></select> 这类原生可禁用元素，而是 <div>、<code><span></span> 或自定义组件。:disabled 只匹配真实设置了 disabled 属性的表单控件，对其他元素完全无效。
另一个高频错误是：JS 中写了 el.disabled = false 或 el.setAttribute('disabled', 'false') —— 这会让 DOM 上残留 disabled=""，浏览器仍视其为禁用状态。正确做法是用 el.removeAttribute('disabled') 或条件渲染移除该属性。
opacity: 0.6 是最稳妥的禁用视觉表达
比起 filter: grayscale(1)，opacity 兼容性好、语义清晰、调试直观。它不干扰焦点管理，也不在 Safari 或旧 Edge 中出现全黑/失效问题。
使用时注意三点：
立即学习“前端免费学习笔记（深入）”；
-
opacity会继承影响子元素，如果按钮里有图标或文字需保持可读，建议把文字颜色同步调浅（如color: #999） - 别单独依赖
opacity表达禁用——必须配合cursor: not-allowed和行为层拦截（比如 click handler 开头加if (btn.disabled) return） - 若项目已用 CSS 变量管理主题色，可统一定义：
--disabled-opacity: 0.6，再在:disabled规则中引用
非表单元素怎么模拟禁用外观？
遇到 <div class="btn"> 或 React 封装的 <code><button></button> 组件，:disabled 无能为力，只能走 class 路线。
推荐写法：
button.is-disabled,
.btn.is-disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none; /* 禁鼠标，但注意：这不影响键盘焦点 */
}关键点：
-
pointer-events: none能阻止鼠标事件，但无法替代disabled的语义和键盘行为（Tab 仍能聚焦、屏幕阅读器仍报“可用”），所以务必同时加aria-disabled="true" - 不要只加 class 就完事——JS 逻辑里仍要判断
el.hasAttribute('aria-disabled') || el.disabled，否则用户键盘 Enter 仍可能触发 - 若组件支持传
disabledprop，优先让它透传到原生<button disabled></button>，比模拟更可靠
禁用样式和无障碍必须同步
只改外观，不处理语义和交互，等于埋雷。用户可能遇到：“看着灰了，但键盘一按就提交” 或 “NVDA 读作‘提交按钮’，实际点不动”。
真正闭环的做法是三者一致：
- DOM 层：
<button disabled></button>或非表单元素加aria-disabled="true" - CSS 层：用
:disabled或.is-disabled控制opacity、cursor、颜色 - 行为层：事件处理器开头检查
if (el.disabled || el.getAttribute('aria-disabled') === 'true')
灰度只是第一眼的事；能不能被键盘操作、会不会被读屏器识别，才是禁用是否“真正生效”的分水岭。
