在Web前端开发中，控制HTML按钮的启用和禁用是非常常见的需求，比如用户未完成表单填写时禁用提交按钮，避免无效提交，当满足条件后再启用按钮。我们可以通过JavaScript操作按钮的DOM属性来实现这个功能，核心是通过修改按钮的disabled属性来控制状态。
按钮禁用和启用的核心原理
HTML的<button>元素和<input type="button">元素都有一个原生的disabled属性，当这个属性被设置时，按钮会处于禁用状态，无法点击，样式也会变为灰色的不可交互状态；当这个属性被移除或者设置为false时，按钮会恢复可点击的启用状态。
我们可以通过JavaScript获取按钮的DOM元素，然后直接修改它的disabled属性值来完成状态切换，也可以通过按钮的setAttribute和removeAttribute方法来操作这个属性。
两种常见的实现方式
方式一：直接修改disabled属性
这种方式是最直接的，获取DOM元素后直接给disabled属性赋值即可，赋值为true表示禁用，false表示启用。
// 获取按钮元素，假设按钮的id是testBtn
const btn = document.getElementById('testBtn');
// 禁用按钮
btn.disabled = true;
// 启用按钮
btn.disabled = false;
方式二：使用setAttribute和removeAttribute方法
除了直接修改属性，我们还可以通过DOM的setAttribute方法给按钮添加disabled属性，通过removeAttribute方法移除disabled属性，同样可以实现状态切换。
// 获取按钮元素
const btn = document.getElementById('testBtn');
// 禁用按钮，添加disabled属性
btn.setAttribute('disabled', 'disabled');
// 启用按钮，移除disabled属性
btn.removeAttribute('disabled');
实际场景示例：表单输入控制按钮状态
最常见的场景就是表单输入框内容为空时禁用提交按钮，当输入框有内容时启用按钮，我们可以通过监听输入框的input事件来实现这个逻辑。
<input type="text" id="username" placeholder="请输入用户名">
<button id="submitBtn" disabled>提交</button>
<script>
// 获取输入框和按钮元素
const input = document.getElementById('username');
const submitBtn = document.getElementById('submitBtn');
// 监听输入框的输入事件
input.addEventListener('input', function() {
// 判断输入框的值是否为空，去除前后空格
if (this.value.trim() !== '') {
// 有内容，启用按钮
submitBtn.disabled = false;
} else {
// 无内容，禁用按钮
submitBtn.disabled = true;
}
});
</script>
注意事项
- 使用
setAttribute设置disabled属性时，属性值可以是任意值，只要存在disabled属性，按钮就会被禁用，通常我们设置为disabled或者true。 - 如果按钮是通过
<input type="button">定义的，同样适用上述方法，disabled属性的规则一致。 - 禁用状态的按钮不会触发
click事件，所以不需要额外判断按钮是否可点击，只要控制disabled属性即可。 - 如果页面中有多个按钮需要批量控制状态，可以通过
document.querySelectorAll获取所有按钮，遍历修改disabled属性。
批量控制按钮状态示例
如果有多个按钮需要同时启用或者禁用，可以通过以下代码实现：
// 获取所有class为operateBtn的按钮
const btns = document.querySelectorAll('.operateBtn');
// 批量禁用所有按钮
btns.forEach(btn => {
btn.disabled = true;
});
// 批量启用所有按钮
btns.forEach(btn => {
btn.disabled = false;
});
JavaScriptHTML_button按钮启用禁用DOM操作修改时间：2026-06-15 17:45:34