按钮禁用需语义、行为、可访问性同步：原生button用disabled属性，a标签须用disabled类+tabindex="-1"+preventDefault；必设aria-disabled="true"，避免仅靠样式。
按钮禁用状态的两种实现方式
Bootstrap 中让按钮视觉上“变灰不可点”，不能只靠 disabled 属性，还得看它挂在哪种元素上。原生 <button> 加 disabled 会自动生效；但如果是 <a> 标签模拟的按钮，必须手动加 disabled 类（disabled 属性对 <a> 无效）。
常见错误：给 <a class="btn btn-primary"> 加 disabled="disabled"，结果样式没变、点击事件照常触发。
-
<button class="btn btn-secondary" disabled>提交</button>—— 正确，原生语义支持 -
<a href="#" class="btn btn-warning disabled">删除</a>—— 正确，disabled类触发 Bootstrap 的禁用样式 -
<a href="#" class="btn btn-info" disabled>导出</a>—— 错误，disabled属性被忽略
禁用状态下仍可响应 click 的坑
加了 disabled 或 disabled 类后，按钮视觉变灰，但 JavaScript 的 click 事件在某些情况下仍会冒泡或被监听到，尤其当父容器绑定了事件委托时。
更可靠的做法是：禁用同时显式移除交互逻辑，而不是只依赖样式。
- 用
element.setAttribute('disabled', 'disabled')后，记得在 JS 中检查element.hasAttribute('disabled')再执行业务逻辑 - 对
<a>按钮，除了加disabled类，建议加tabindex="-1"并阻止默认行为：event.preventDefault() - 避免在
disabled元素上绑定click监听器；若必须监听父级，请在回调里用event.target.matches('.disabled, [disabled]')过滤
自定义禁用样式的兼容性注意点
Bootstrap 5 默认通过 opacity: .65 + pointer-events: none 实现禁用效果，但 pointer-events: none 在 IE 10/11 下不支持，且会影响子元素的 hover/focus 状态。
如果你需要支持旧版 IE，或按钮内含图标、下拉箭头等需保留部分交互的子元素，别直接覆盖 pointer-events，而是用 aria-disabled="true" 配合 JS 控制行为。
- 禁用时务必同步设置
aria-disabled="true"，否则屏幕阅读器无法识别状态 - 不要仅靠颜色或透明度判断是否禁用——色弱用户可能看不出区别，应配合文字提示（如“暂不可用”）或图标变化
- 若重写了
.btn:disabled样式，注意 Bootstrap 5 的$btn-disabled-opacity变量默认为.65，低于此值可能影响可访问性对比度
Vue/React 等框架中动态控制禁用状态
在组件化开发中，禁用状态常由数据驱动，但容易忽略 DOM 渲染时机和属性绑定方式。
例如 Vue 中写 <button :disabled="isSubmitting"> 是对的；但如果写成 <button :class="{ disabled: isSubmitting }">，就漏掉了原生禁用能力，只改了样式。
- Vue：优先用
:disabled绑定布尔值，而非手动拼disabled类名 - React：用
disabled={isSaving}，不要用className={`btn ${isSaving ? 'disabled' : ''}`> - Svelte：
<button disabled={pending}>即可，框架会正确处理属性存在性 - 所有框架中，禁用状态变更后，若按钮内有加载图标（如 Font Awesome
fa-spinner），需确保图标不因pointer-events: none而丢失动画帧（部分 CSS 动画在opacity: 0下仍运行，但pointer-events: none不影响动画本身）
禁用不是加个类或属性就完事，关键在语义、行为、可访问性三者同步。最常被跳过的其实是 aria-disabled 和对 <a> 标签的特殊处理——这两处一漏，用户要么点不动却不知道为什么，要么点得动却触发了不该触发的操作。
