bootstrap 5 仅通过 button:disabled 伪类控制禁用样式，需用 opacity: 0.4 !important 覆盖默认透明度，或改用 rgba 分别调控背景、文字、边框；js 必须操作 disabled 属性而非 class 才能生效。
button:disabled 伪类是唯一可控入口
Bootstrap 5 不再响应 .disabled 类控制禁用样式，只认原生 disabled 属性。所有视觉表现（包括透明度）都由 button:disabled 这个 CSS 选择器接管。你写 <button disabled></button>，框架内部就靠这个规则设 opacity: .65、pointer-events: none 和 cursor: not-allowed。想改透明度，必须覆盖它，而不是去碰不存在的工具类或废弃的类名。
直接覆盖 opacity 值但别漏掉兼容细节
最简方式是在你的 CSS 里重写 button:disabled 的 opacity：
button:disabled {
opacity: 0.4 !important;
}
注意这几点：
-
!important很可能需要——Bootstrap 5 的默认样式权重高，尤其在.btn组合使用时容易被覆盖失败 - 别只写
opacity: 40%，CSS 规范只接受 0–1 区间的小数，0.4正确，40%无效 - 如果按钮用了
btn-outline-*类，禁用后文字和边框颜色可能对比度过低，建议同步调color和border-color，比如color: rgba(0,0,0,0.3) - 旧版 Safari 对
:disabled+opacity的组合渲染偶有延迟，加will-change: opacity可缓解
用 rgba 替代 opacity 能更好保色相
单纯调 opacity 会让整个按钮（含文字、边框、阴影）一起变淡，有时导致可读性崩坏。更稳妥的做法是保持 opacity: 1，改用 rgba() 分别降背景、文字、边框的 alpha 值：
button:disabled {
opacity: 1;
background-color: rgba(59, 130, 246, 0.2); /* 原始蓝色 #3b82f6 → 半透 */
color: rgba(255, 255, 255, 0.5);
border-color: rgba(59, 130, 246, 0.3);
}
这样做的好处：
- 文字灰度可控，不会因父容器背景干扰而发糊
- 保留原始色相倾向，主题切换时更容易维护
- 避免
opacity导致子元素（如图标<i></i>）也被弱化过度 - 对屏幕阅读器无影响，语义和行为完全由
disabled属性保证
JS 动态启用/禁用时透明度不更新？检查属性而非 class
常见错误是用 JS 写 btn.classList.add('disabled')，这在 Bootstrap 5 中完全无效——它既不触发 :disabled 样式，也不阻止点击。正确做法只有两种：
- 设属性：
btn.disabled = true或btn.setAttribute('disabled', '') - 删属性：
btn.disabled = false或btn.removeAttribute('disabled') - 务必同步处理
aria-disabled：启用时删掉，禁用时设为"true"，否则读屏软件可能无法感知状态变化 - 如果按钮文本动态变化（比如从“提交”变成“保存中”），记得在状态切换后强制重绘：
btn.style.opacity = btn.disabled ? '0.4' : '1'（仅当 CSS 覆盖未生效时兜底）
真正容易被忽略的是：透明度是否生效，和按钮有没有被 JS 正确标记为 disabled 是两回事；前者是样式问题，后者是功能+语义问题——先确保属性到位，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
