在HTML页面开发中，设置控件的禁用状态是非常常见的需求，比如用户未勾选同意协议时禁用提交按钮，或者普通用户无法修改管理员专属的输入框内容，这些场景都可以通过disabled属性快速实现。disabled是HTML原生的布尔属性，添加到对应元素上后，元素会进入禁用状态，无法被用户交互，同时相关数据也不会被表单提交。
disabled属性适用元素
disabled属性并不是所有HTML元素都支持，它主要作用于表单相关的交互控件，常见的适用元素如下：
- 表单输入类元素：
<input>（所有类型，如text、checkbox、radio、button等）、<textarea>、<select> - 表单关联元素：
<button>、<option>、<optgroup>、<fieldset>
如果给不支持disabled属性的元素添加该属性，浏览器会忽略这个设置，不会产生任何禁用效果。
基础使用方式
disabled是布尔属性，不需要赋值，只要出现在元素的开始标签中，就会生效。如果不需要禁用，直接删除该属性即可，不要设置disabled="false"这类写法，因为只要属性存在，无论值是什么，元素都会被禁用。
输入框禁用示例
给文本输入框添加disabled属性后，用户无法点击输入，输入框背景会默认变为灰色：
<!-- 禁用的文本输入框 --> <input type="text" value="默认内容" disabled> <!-- 未禁用的文本输入框 --> <input type="text" placeholder="请输入内容">
按钮禁用示例
按钮禁用后无法被点击，常用于表单校验未通过时阻止提交：
<!-- 禁用的提交按钮 --> <button type="submit" disabled>提交</button> <!-- 未禁用的提交按钮 --> <button type="submit">提交</button>
下拉选择框禁用示例
下拉框禁用后无法展开选择，内部的option选项也无法被选中：
<select disabled> <option value="1">选项一</option> <option value="2">选项二</option> </select>
fieldset批量禁用子元素
如果需要一次性禁用一组相关的表单控件，可以把这些控件放在<fieldset>标签内部，然后给fieldset添加disabled属性，所有内部的表单控件都会被批量禁用，不需要逐个设置。
<fieldset disabled>
<legend>用户信息</legend>
<p>
<label>用户名：<input type="text" name="username"></label>
</p>
<p>
<label>密码：<input type="password" name="password"></label>
</p>
<p>
<button type="submit">保存</button>
</p>
</fieldset>
动态控制禁用状态
实际开发中经常需要根据用户操作动态切换控件的禁用状态，比如勾选协议后启用提交按钮，这时候可以通过JavaScript操作元素的disabled属性实现。
JavaScript控制示例
下面的示例实现了勾选同意协议后，提交按钮从禁用变为可用的效果：
<input type="checkbox" id="agree">
<label for="agree">我已阅读并同意用户协议</label>
<br>
<button type="submit" id="submitBtn" disabled>提交</button>
<script>
// 获取复选框和提交按钮元素
const agreeCheckbox = document.getElementById('agree');
const submitBtn = document.getElementById('submitBtn');
// 监听复选框的变更事件
agreeCheckbox.addEventListener('change', function() {
// 复选框勾选时，移除按钮的disabled属性，否则添加
if (this.checked) {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
});
</script>
注意事项
- 禁用状态的控件不会被表单提交：如果禁用的输入框有value值，提交表单时这个字段不会被发送到后端，如果需要保留值但不让用户修改，可以使用readonly属性代替。
- CSS可以自定义禁用样式：浏览器默认的禁用控件样式比较单一，可以通过
input:disabled、button:disabled等伪类选择器自定义禁用状态的样式，比如修改背景色、文字颜色等。 - disabled和readonly的区别：readonly属性只能用于input和textarea，元素可读但不可修改，值会被表单提交；disabled适用于更多元素，元素完全不可交互，值不会被提交。
常见问题解答
disabled属性可以设置值为true吗？
可以，但没必要。因为disabled是布尔属性，只要属性存在于元素标签中，无论值是true、false还是其他内容，元素都会被禁用。如果不需要禁用，直接删除该属性即可。
怎么判断一个元素是否被禁用了？
可以通过JavaScript访问元素的disabled属性，返回true表示被禁用，返回false表示未被禁用：
const input = document.getElementById('testInput');
if (input.disabled) {
console.log('该输入框处于禁用状态');
} else {
console.log('该输入框未被禁用');
}
HTMLdisabled属性表单控件前端开发修改时间：2026-07-18 20:48:37