bootstrap 5 中 disabled 按钮的默认样式定义在 button:disabled 和 input[type="submit"]:disabled 等原生属性选择器上，核心为 opacity: .65 !important 和 pointer-events: none，不依赖已废弃的 .disabled 类。
Bootstrap 5 中 disabled 按钮的默认样式在哪定义
Bootstrap 5 默认对 disabled 的 <button></button>（含 type="submit"）应用了透明度降低、指针禁用和背景/边框灰化处理，核心是 opacity: .65 + pointer-events: none。它不依赖 .disabled 类，而是直接响应原生 disabled 属性——这点容易被忽略，很多人徒劳地加类却不起作用。
关键点：disabled 是 HTML 原生属性，不是 CSS 类；Bootstrap 的样式规则绑定在 button:disabled 和 input[type="submit"]:disabled 等选择器上。
- 如果你用
class="btn disabled"但没加disabled属性，样式不会生效（.disabled类在 Bootstrap 5 中已废弃） - JS 动态启用/禁用时，必须操作
element.disabled = true/false，而非仅切换类 -
表单提交前手动设
disabled后，记得在请求完成后再移除，否则按钮永远卡住
如何覆盖默认禁用样式（比如改颜色或去掉透明度）
要自定义禁用态外观，需提高 CSS 优先级，直接覆盖 Bootstrap 的 :disabled 规则。推荐在项目样式中添加：
button.btn:disabled,
input[type="submit"]:disabled {
opacity: 1 !important;
background-color: #999 !important;
border-color: #777 !important;
color: #fff !important;
cursor: default !important;
}
注意：!important 在这里几乎是必需的，因为 Bootstrap 的原始规则也带 !important（如 opacity: .65 !important）。不加会导致覆盖失败。
- 不要只写
button:disabled，要带上.btn或具体类型选择器，避免影响其他非 Bootstrap 按钮 - 如果用了 Sass，可在自定义变量后重写
$btn-disabled-opacity，但编译后仍需检查是否被最终 CSS 覆盖 - 移动端要注意
cursor: default不一定生效，可加touch-action: none辅助
禁用状态与表单验证联动时的常见坑
很多场景下，提交按钮需要根据表单字段有效性动态禁用，比如邮箱格式不对就禁用。这时容易出错：
- 只监听
input事件，漏掉粘贴（paste）、自动填充（input有时不触发）、或清空（change也不总触发），建议用addEventListener('input', ...)+addEventListener('change', ...)组合 - 校验逻辑写在按钮点击里，导致用户点了才提示错误，体验差；应实时更新
disabled状态，并配合setCustomValidity()让浏览器原生提示生效 - 异步校验（如用户名是否已存在）期间，按钮应置为
disabled并显示 loading 文本，但不能简单设disabled后就不管——否则用户无法取消请求，建议用data-loading="true"+ CSS 控制，保留交互能力
Vue / React 中控制 disabled 的注意事项
框架绑定容易掩盖原生行为差异：
- Vue：用
:disabled="isSubmitting || !formValid"是对的，但确保isSubmitting是响应式数据；若用v-bind:disabled绑定字符串"true"（而非布尔值），会恒为真——必须传true/false，不是字符串 - React：同理，
disabled={isSubmitting}正确，disabled="true"错误；且函数组件中状态更新后，按钮 DOM 属性不会自动同步，需确保重新渲染 - SSR 场景下，服务端渲染时若初始状态为
disabled，客户端 hydrate 后可能闪烁，建议统一用useEffect或onMounted初始化状态
禁用样式的真正难点不在怎么改颜色，而在于什么时候该禁、什么时候该恢复、以及禁用期间用户还能不能取消操作——这些逻辑比样式本身更常出问题。
