按钮加disabled属性后未变灰，是因为只有原生表单控件（如button、input[type="button"]）才识别该属性；非原生元素或未透传至真实button的自定义组件无效，且需显式CSS覆盖button:disabled样式并正确赋值。
button加disabled属性后没变灰？先确认是不是真按钮
不是所有带disabled的标签都会变灰——只有原生表单控件才识别这个属性。<button>、<input type="button">、<input type="submit">这些可以；但<div>、<span>或自定义组件内部没透传到真实<button>上，加了也白加。
检查方法：打开 DevTools，选中元素，在 Elements 面板里找有没有disabled这个**HTML 属性**（不是class="disabled"，也不是data-disabled="true"）。
- Vue 项目别只写
:disabled="isDisabled"却忘了在模板里绑定到子元素的<button> - React 中
<MyButton disabled />必须确保最终渲染出的是<button disabled>，而不是仅加 class - 用
role="button"模拟的按钮，disabled属性不会触发原生禁用行为
button:disabled 伪类不生效？CSS 写法有硬要求
button:disabled 是浏览器原生伪类，它只匹配 DOM 中真实存在的 disabled 属性，且必须写对选择器。光靠浏览器默认样式在深色主题、Safari 或某些安卓 WebView 下可能几乎看不出变化。
必须显式覆盖，至少包含三项：
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0.6（别用filter: grayscale(100%)，文字会模糊，部分 WebView 不支持） -
cursor: not-allowed（否则悬停时鼠标还是手型） -
background-color和color（别依赖继承，深色模式下尤其要设）
如果按钮含 SVG 图标，记得在 button:disabled svg 里统一控制 fill 或 opacity，否则图标仍高亮。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
JS 动态设 btn.disabled = true 却点不了？常见赋值翻车点
最常出错的是布尔逻辑反了：btn.disabled = true 是禁用，false 才是启用。不是“true 表示可用”。很多人写成 if (input.value) btn.disabled = true，结果一输内容按钮立刻灰掉。
安全写法是直接表达式赋值：
btn.disabled = input.value.trim() === '';
另外注意几个坑：
- 别用
setAttribute('disabled', 'true')替代.disabled = true—— 前者只改 HTML 属性，某些框架（如 React 控制组件）可能忽略它 - 动态插入的按钮，必须等 DOM 挂载完成再操作，否则
document.getElementById()返回null - 表单提交成功或校验通过后，必须显式设
btn.disabled = false，否则按钮一直灰着
为什么禁用后还能回车触发？submit 事件里没第一时间锁住
用户点按钮没反应，但按回车照样发请求——大概率是把 btn.disabled = true 放在了 fetch().then() 里，而不是 submit 事件第一行。
真正要拦截的是「事件触发的瞬间」，不是「响应返回的时刻」。正确做法是监听 form 的 submit 事件，并在第一行执行禁用：
form.addEventListener('submit', e => {
e.preventDefault();
const buttons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
buttons.forEach(btn => {
btn.disabled = true;
btn.textContent = '提交中…';
});
// 后续再发请求
});
特别注意：不要只禁用一个按钮。回车提交会绕过 click，但逃不过 submit，所以得批量禁用所有提交控件。
实际中最容易被忽略的，是禁用后没同步更新文案或加载状态，导致用户在弱网下反复点击——不是他们没耐心，是根本不确定刚才那一下有没有被系统收到。
