最可靠的方式是直接操作 disabled 属性：true 表示禁用，false 表示启用；推荐用 btn.disabled = input.value.trim() === '' 动态控制，并在 DOMContentLoaded 后校验初始状态。
临时禁用按钮，最可靠的方式就是直接操作 disabled 属性——它不是“视觉开关”，而是浏览器原生接管交互、提交和可访问性的语义开关。别绕路写 CSS 或监听 click 拦截。
button.disabled = true 还是 false？别反逻辑
禁用状态的布尔值容易记混：true 表示禁用，false 表示启用。常见翻车写法：
-
if (input.value) { btn.disabled = true; }→ 输入一有内容，按钮立刻变灰不可点（本该启用） - 正确映射是：输入有效 → 启用（
btn.disabled = false），无效 → 禁用（btn.disabled = true） - 推荐一行表达式：
btn.disabled = input.value.trim() === '';，简洁且语义清晰
为什么 input 事件比 onkeyup 更适合动态禁用
onkeyup 只响应键盘松开，漏掉大量真实用户行为：
- 右键粘贴、拖拽文本、密码管理器自动填充、语音输入、剪切板粘贴（Ctrl+V）都不会触发
- 结果：输入框明明有值，按钮仍灰着，用户以为没生效
- 改用
input事件，覆盖所有值变更场景（包括撤销、自动补全） - 务必在
DOMContentLoaded后立即执行一次校验，否则预填充内容不会触发初始状态更新
动态插入按钮时 DOM 未就绪怎么办
JS 执行早于按钮渲染，document.getElementById('saveBtn') 返回 null，报错 Cannot set property 'disabled' of null：
立即学习“前端免费学习笔记（深入）”；
- 先判空：
const btn = document.getElementById('saveBtn'); if (!btn) return; - 或把脚本放在
</body>前；或包装进DOMContentLoaded回调 - Vue/React 中别在
mounted/useEffect外直接操作 DOM；等组件完成渲染再取 ref - 绝对别用
setTimeout“等一下”，时机不可控，尤其在慢网或高负载下失效
禁用后按钮的 value 还会提交吗
不会。这是关键隐含规则，常被忽略：
-
<button type="submit" name="action" value="publish" disabled>发布</button>→ 提交时，action=publish**完全不发送** - 若需区分操作类型（如“保存草稿”vs“正式发布”），又想临时禁用某一个，得用其他方式传参（比如隐藏
<input type="hidden">） - 表单内禁用按钮点击，既不触发自身
click，也不触发表单submit事件——别在禁用后还依赖submit做拦截校验
真正禁用必须靠 disabled 属性本身驱动，样式、焦点、读屏播报、表单数据流全部绑定于此。任何用 class、pointer-events: none 或 aria-disabled 单独模拟的做法，都会在键盘导航、辅助技术或表单提交环节暴露缺陷。
