设为 true 表示禁用，false 表示启用；正确逻辑是输入有效时 btn.disabled = false，无效时为 true，推荐直接赋值表达式 btn.disabled = input.value.trim() === ''。
button.disabled = true 还是 false？别搞反逻辑
禁用按钮最常翻车的地方，就是把 disabled 的布尔值语义记反：设成 true 是禁用，false 才是启用。不是“true 表示可用”。很多代码写成 if (input.value) { btn.disabled = true; }，结果一输内容按钮立刻变灰点不了。
正确映射必须是：输入有效 → 启用（btn.disabled = false），输入无效 → 禁用（btn.disabled = true）。更简洁的写法是直接赋值表达式：btn.disabled = input.value.trim() === '';，一行搞定判断+赋值。
只监听 onkeyup 会漏掉粘贴和自动填充
onkeyup 只捕获键盘松开事件，用户右键粘贴、拖拽文本、密码管理器填充、语音输入等操作都不会触发它，按钮状态就会卡住——明明填了内容，按钮还是灰色。
改用 input 事件才是可靠选择：
立即学习“前端免费学习笔记（深入）”；
-
input覆盖所有值变更场景（包括粘贴、剪切、撤销、自动填充） - 务必在
DOMContentLoaded后立即调用一次校验函数，否则预填充的输入框会导致按钮初始状态错误 - 避免内联写法如
oninput="checkInput()"，优先用addEventListener('input', ...)，便于维护和测试
动态插入的按钮要等 DOM 挂载完再操作
Vue/React 渲染的按钮、AJAX 加载后插入的表单控件，如果 JS 在节点还没出现在 DOM 中时就执行 document.getElementById('saveBtn').disabled = true，会得到 null，报错 Cannot set property 'disabled' of null。
安全做法是：
- 先判空：
const btn = document.getElementById('saveBtn'); if (!btn) return; - 或把 JS 放在 HTML 底部；或包装进
DOMContentLoaded；或对框架组件使用对应的生命周期钩子（如 Vue 的mounted） - 不要依赖
setTimeout等不确定时机的“等待”方案
别用 CSS 模拟 disabled：pointer-events: none 不够用
仅加 style="pointer-events: none; opacity: 0.5;" 看似按钮点不动了，但问题一堆：
- Tab 键仍能聚焦该按钮，键盘用户无法绕过
- 表单提交时，这个“假禁用”按钮的 value 依然会发出去
- 屏幕阅读器完全感知不到禁用状态，违反可访问性（a11y）要求
- 移动端触摸事件可能仍有穿透或误触风险
真正禁用，必须用原生 disabled 属性——它同时锁交互、删提交、改语义、兼容辅助技术。CSS 只负责美化 :disabled 状态，不能替代它。
容易被忽略的一点：动态控制时，永远用 btn.disabled = true/false，而不是 setAttribute('disabled', '') 或 removeAttribute('disabled')——后者虽能工作，但读取 btn.disabled 时返回的仍是布尔值，混用易导致状态不一致。
