直接给标签加disabled属性可真正禁用交互，浏览器原生支持语义化控制：变灰、禁鼠标点击、tab不可聚焦、回车不触发、表单不提交其值。
直接给 <button></button> 标签加上 disabled 属性，就能真正禁用点击交互。它不是装饰性写法，而是浏览器原生支持的语义化控制：按钮会变灰、无法鼠标点击、键盘 Tab 不能聚焦、回车键不触发、表单提交时也不会发送它的值。
正确写法示例：
<button disabled>提交</button> <input type="button" value="保存" disabled><button type="submit" disabled>立即下单</button>
注意 disabled 是布尔属性，存在即生效，不需要写 disabled="true" 或 disabled=""（虽然也兼容），更不能写 disabled="false"——那依然会被当作启用状态。
动态禁用要同步设置
JavaScript 中应直接操作 .disabled 属性：
const btn = document.getElementById('saveBtn');
btn.disabled = true; // ✅ 立即禁用
btn.disabled = false; // ✅ 恢复启用
别用 setAttribute('disabled', '') 或 removeAttribute('disabled')，它们在部分旧浏览器中行为不一致，且和 .disabled 的读取值可能不同步。
禁用逻辑别写反
常见错误是把“输入有效”和“按钮启用”的关系搞错：
- ❌ 错误：
if (input.value) btn.disabled = true;（一输内容就禁用） - ✅ 正确：
btn.disabled = input.value.trim() === '';（空才禁用）
防重复点击的关键时机
点击事件回调的第一行就要设 btn.disabled = true，而不是等异步请求完成后再设：
btn.addEventListener('click', () => {
btn.disabled = true; // ✅ 首行立即锁住
fetch('/api').finally(() => btn.disabled = false);
});
如果按钮是 <button type="submit"></button>，还要注意：用户可能按回车提交整个表单，所以建议统一监听 form.submit 并调用 e.preventDefault()，或直接把按钮改成 type="button"。
样式配合不可少
仅加 disabled 属性，浏览器默认样式可能不够明显。推荐用 CSS 的 :disabled 伪类增强反馈：
button:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: #e0e0e0;
color: #999;
}
别只靠 pointer-events: none 或透明度样式模拟禁用——那只是视觉欺骗，键盘仍可触发、表单仍会提交、屏幕阅读器也无法识别状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
