真禁用必须加原生disabled属性，仅CSS无效；需同时满足DOM属性、CSS样式（:disabled）、行为拦截与可访问性标注（aria-disabled）三者协同。
button加disabled属性才是真禁用
只靠CSS让按钮“看起来不能点”，根本不算禁用。浏览器必须识别到原生 disabled 属性，才能真正阻止点击、键盘聚焦（Tab）、表单提交，也才能被屏幕阅读器正确读作“已禁用”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<button disabled>提交</button>是最简写法；disabled="disabled"或disabled=""也等效，但别写disabled="false"—— HTML 里非空字符串就是真值，按钮照样禁用 - JS 动态控制时，用
btn.setAttribute('disabled', '')禁用，用btn.removeAttribute('disabled')启用；仅设btn.disabled = false可能不删 DOM 属性，下次服务端直出或重渲染还会生效 - 检查是否真禁用，优先用
btn.hasAttribute('disabled')，比btn.disabled更可靠，尤其在初始带disabled的 SSR 场景下
:disabled伪类为什么没反应？
样式没变，大概率是按钮压根没进入禁用状态——:disabled 只匹配真实禁用的表单控件（<button>、<input>、<select>），对 <div>、<span> 或仅加了 class="disabled" 的元素完全无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- React 中写
<button disabled={isSubmitting}>，确保isSubmitting是布尔值，不是字符串"false" - Vue 中写
<button :disabled="isSaving">，别写:disabled="'false'"，那仍是禁用 - 框架里若用
v-bind:class="{disabled: isDisabled}"模拟，:disabled样式不会触发；得改用.disabled类 + 自定义 CSS - DevTools 里手动删掉
disabled属性，看样式是否同步消失——这是验证:disabled是否真正起效的最快方式
置灰效果怎么写才统一又靠谱？
浏览器对 :disabled 的默认渲染差异极大：Chrome 可能只降 opacity，Firefox 加灰阶滤镜，Safari 甚至保留高亮色。想视觉一致，必须显式覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 组合使用
opacity和filter: grayscale()，比如button:disabled { opacity: 0.6; filter: grayscale(0.8); }，比单用opacity更接近“置灰”语义 - 老版 Safari 对
grayscale()支持差，可能全黑，fallback 写法：filter: grayscale(1) brightness(0.9); - 必须加
cursor: not-allowed，否则鼠标悬停时仍显示手型，用户会误以为可点 - 深色主题下硬写
background-color: #ccc会违和，优先用 CSS 变量：background-color: var(--disabled-bg, #eee);
a标签怎么禁用？它没有disabled属性
<a> 标签天生不支持 disabled 属性，强行加 disabled="true" 不会被解析，也不会触发 :disabled。想让它不可点，得换思路。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
pointer-events: none阻断鼠标事件，再配合opacity和颜色调整视觉反馈：a.is-disabled { pointer-events: none; opacity: 0.6; color: #999; } - 必须加
aria-disabled="true"，否则屏幕阅读器无法识别禁用状态；但别同时写disabled属性（它无效）和aria-disabled，避免语义冲突 - 如果需要键盘可访问性（比如用 Tab 聚焦后按回车），
pointer-events: none不够——得监听keydown并preventDefault()，或直接移除href属性 - 更推荐方案：改用
<button type="button">替代<a>，它原生支持disabled，语义和行为都完整
disabled 属性、CSS 层的 :disabled 或自定义类、行为层的事件拦截与可访问性标注，三者缺一不可。漏掉任意一环，就可能出现“看着灰了却能点”“键盘能触发但鼠标不能”“读屏器说可用但实际点不动”这类错位问题。 
