在HTML5中，button标签的disabled属性是专门用来控制按钮是否处于禁用状态的核心属性，设置该属性后按钮会变为不可点击状态，同时默认样式会变为灰色，用户无法触发按钮的点击事件。
disabled属性的基本语法
disabled属性是布尔类型的属性，不需要赋值，只要出现在button标签中，按钮就会进入禁用状态。按照规则A，在描述标签时，正确的标签写法应该是<button>，而不是未转义的<button>标签。
基本的静态设置语法如下：
<!-- 禁用状态的按钮 --> <button disabled>不可点击的按钮</button> <!-- 可用状态的按钮 --> <button>可点击的按钮</button>
静态设置按钮禁用状态
如果页面加载时就需要某个按钮处于禁用状态，直接在<button>标签中添加disabled属性即可，不需要设置属性值。此时按钮会默认显示为灰色，鼠标悬停时也不会出现可点击的指针样式。
下面是一个简单的静态禁用示例，包含两个按钮，一个禁用一个可用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>静态禁用按钮示例</title>
</head>
<body>
<button disabled>提交（已禁用）</button>
<button>取消（可点击）</button>
</body>
</html>
动态修改按钮禁用状态
实际开发中更多场景是需要动态控制按钮的禁用状态，比如表单未填写完整时提交按钮禁用，填写完整后启用。这时候可以通过JavaScript来操作disabled属性。
通过JavaScript获取和修改属性
可以使用getElementById等方法获取按钮元素，然后直接修改元素的disabled属性值，设置为true表示禁用，false表示启用。
下面的示例实现了输入框内容为空时按钮禁用，输入内容后按钮启用的功能：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态控制按钮禁用</title>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名" oninput="checkInput()">
<button id="submitBtn" disabled>提交</button>
<script>
function checkInput() {
// 获取输入框和按钮元素
const input = document.getElementById('username');
const btn = document.getElementById('submitBtn');
// 判断输入框是否有值，有值则启用按钮，无值则禁用
if (input.value.trim() !== '') {
btn.disabled = false;
} else {
btn.disabled = true;
}
}
</script>
</body>
</html>
通过setAttribute和removeAttribute操作
除了直接修改属性，还可以使用setAttribute方法添加disabled属性，使用removeAttribute方法移除disabled属性来控制状态。
// 获取按钮元素
const btn = document.getElementById('testBtn');
// 设置按钮为禁用状态
btn.setAttribute('disabled', '');
// 移除禁用状态，恢复可点击
btn.removeAttribute('disabled');
禁用状态的样式自定义
默认的禁用按钮样式是灰色，可能不符合项目的设计需求，我们可以通过CSS选择器来定制禁用状态的按钮样式。使用button:disabled伪类选择器可以选中所有处于禁用状态的button元素。
/* 自定义禁用按钮样式 */
button:disabled {
background-color: #f0f0f0;
color: #999;
cursor: not-allowed;
border: 1px solid #ddd;
}
/* 可用按钮样式 */
button:not(:disabled) {
background-color: #1890ff;
color: #fff;
cursor: pointer;
border: 1px solid #1890ff;
}
注意事项
- disabled属性的属性值可以是空字符串、disabled或者true，只要存在该属性，按钮就会处于禁用状态，设置为false不会取消禁用，只能通过移除属性实现。
- 处于禁用状态的button元素不会触发click事件，也不会被表单提交时包含，即使它有name和value属性。
- 如果通过JavaScript修改disabled属性，要确保操作的时机，比如在DOM加载完成后执行，避免获取不到元素的问题。
- 不要将disabled属性和readonly属性混淆，readonly属性一般用于input等输入元素，button标签不支持readonly属性。
常见问题解答
disabled和hidden属性有什么区别
disabled是让按钮不可点击但依然显示在页面上，hidden是让按钮完全隐藏不显示在页面中，两者适用场景不同。如果需要按钮占位但不让用户操作，用disabled；如果不需要按钮出现，用hidden。
禁用状态下还能触发其他事件吗
禁用状态下，除了click事件无法触发，大部分其他事件比如mouseover、mouseout等依然可以触发，所以如果需要在禁用状态下做样式交互，需要注意事件的影响。
HTML5button标签disabled属性按钮禁用修改时间：2026-06-19 19:21:34