button 的 disabled 是布尔属性，存在即禁用，移除即启用；JS 应设 element.disabled = true/false；禁用后值不提交，且影响可访问性与样式。

button 的 disabled 属性直接设为布尔值即可

HTML5 中，button 元素的 disabled 是一个布尔属性，只要存在（不管值是什么），按钮就禁用；移除该属性，按钮恢复可用。浏览器不校验它的值，disabled="false" 依然禁用。

• disabled 存在 → 按钮不可点击、不可聚焦、不触发 click 事件
• disabled 不存在 → 按钮正常响应交互
• 不要写 disabled="0" 或 disabled="false" —— 这些写法无效且误导

JavaScript 动态控制 disabled 状态的正确写法

用 JS 控制时，别直接赋值字符串，要用 Boolean 值或 DOM 属性操作方法。原生 JS 推荐用 element.disabled = true/false，这是最可靠的方式。

<button id="submitBtn">提交</button>
<script>
const btn = document.getElementById('submitBtn');
// ✅ 正确：赋布尔值
btn.disabled = true;
btn.disabled = false;

// ❌ 错误：设字符串，实际仍禁用
btn.setAttribute('disabled', 'false'); // 依然禁用！
btn.setAttribute('disabled', '');      // 禁用
</script>

禁用按钮的样式和可访问性注意事项

默认禁用按钮会变灰、降低透明度，但很多项目会覆盖默认样式。这时必须手动加 opacity 或 cursor: not-allowed，否则用户看不出状态变化。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• CSS 中用 button:disabled 或 button[disabled] 选择器定义样式
• 屏幕阅读器依赖 disabled 属性播报“已禁用”，不能只靠视觉隐藏
• 禁用后仍需保留 aria-label（如有），避免无障碍信息丢失
• 不要仅用 pointer-events: none 代替 disabled —— 它不阻止键盘聚焦，也不影响语义

表单提交时 disabled 按钮的值不会被提交

这是关键行为：当 button 带有 name 和 value（如提交按钮用于区分操作类型），一旦设了 disabled，它的 name=value 对**完全不会出现在表单数据中**，后端收不到。

立即学习“前端免费学习笔记（深入）”；

• 例如：<button type="submit" name="action" value="save" disabled>保存</button> → 提交时无 action=save
• 若需“视觉禁用但保留提交值”，应改用 type="button" + JS 控制提交逻辑，而非依赖 disabled
• 表单验证中常配合 disabled 防重复提交，但要确保禁用前已收集完必要字段，否则可能漏传数据

禁用按钮看着简单，但涉及语义、可访问性、表单数据流三个层面，最容易忽略的是“禁用后值不提交”这个隐含规则。