直接加 disabled 属性是最可靠的方式，适用于原生支持该属性的 button 和 input 元素，语义正确、无障碍友好且无需额外 CSS；错误做法是仅用 class="disabled" 模拟禁用。
直接加 disabled 属性是最可靠的方式
对 <button> 和 <input type="button"> 这类原生支持 disabled 的元素，直接写 disabled 属性即可禁用，浏览器会自动屏蔽点击、键盘交互，并降低透明度。这是语义正确、无障碍友好、且无需额外 css 的标准做法。
常见错误是只加 class="disabled" 却漏掉属性本身——这样按钮视觉上变灰了，但依然能被键盘 Tab 到、按 Enter 触发，对屏幕阅读器也不友好。
-
<button type="button" class="btn btn-primary" disabled>提交</button>✅ 正确 -
<button type="button" class="btn btn-primary disabled">提交</button>❌ 仅视觉禁用，功能未关闭 -
<input type="button" class="btn btn-secondary" disabled value="取消">✅ 同样有效
.disabled 类只适用于不支持 disabled 的元素（比如 <a>）
Bootstrap 的 .disabled 类本质是模拟禁用效果：改颜色、去渐变、设 pointer-events: none、降 opacity。但它不能替代原生 disabled 属性的语义和行为。
所以它只该用在链接按钮这类“伪按钮”上，例如：<a href="#" class="btn btn-warning disabled">导出</a>。这种写法不会触发跳转，鼠标悬停也无反应，但要注意：它无法阻止键盘聚焦（除非手动加 tabindex="-1"）。
- 用在
<a>上：视觉+交互基本禁用，可接受 - 用在
<button>上：多余，且掩盖真实状态，容易引发可访问性问题 - 若必须用 JS 动态控制，优先操作
element.disabled = true，而非增删.disabled类
JS 控制时别忘了同步更新 aria-disabled
当按钮状态由 JS 动态切换（比如表单校验后启用提交），光设 disabled 属性还不够。部分旧版读屏软件依赖 aria-disabled="true" 来播报禁用状态，尤其当按钮内容动态变化时。
- 推荐写法：
btn.disabled = true; btn.setAttribute('aria-disabled', 'true'); - 对应启用时也要清除：
btn.disabled = false; btn.removeAttribute('aria-disabled'); - 不加
aria-disabled不影响功能，但会影响残障用户对当前状态的感知
Bootstrap 5 中 .disabled 类已移除，别再混用
Bootstrap 5 官方文档明确废弃了独立的 .disabled 工具类。所有禁用逻辑回归原生语义——也就是说，现在只认 disabled 属性，CSS 样式由框架内部通过属性选择器 button:disabled 自动接管。
如果你在 Bootstrap 5 项目里还看到 class="disabled" 生效，大概率是旧 CSS 残留或自定义样式干扰，不是框架本意。
- 升级到 Bootstrap 5 后，删掉所有手动加的
.disabled类 - 检查是否误引入了 Bootstrap 4 的 CSS 文件
- 用浏览器开发者工具看禁用按钮的 computed styles，确认生效的是
:disabled伪类，而非类名匹配
aria-disabled，以及在 Bootstrap 5 里还沿用老版本的 .disabled 类写法。 
