HTML表单的disabled属性用于禁用指定的表单元素，被禁用的元素无法被用户点击、输入或者选择，也不会在表单提交时传递对应的值，是前端开发中控制表单交互状态的常用属性。
disabled属性的基本设置语法
disabled属性是HTML的布尔属性，不需要设置具体的值，只要出现在表单元素的标签中，该元素就会被禁用。常见的设置方式有两种，效果完全一致。
<!-- 方式一：直接添加disabled属性 --> <input type="text" name="username" disabled> <!-- 方式二：设置disabled属性值为disabled --> <input type="password" name="pwd" disabled="disabled">
不同表单元素的disabled设置示例
大部分HTML表单元素都支持disabled属性，包括<input>、<textarea>、<select>、<button>等，下面是具体的使用示例。
文本类输入元素
<!-- 禁用文本框 --> <input type="text" placeholder="不可输入内容" disabled> <!-- 禁用文本域 --> <textarea rows="3" cols="20" disabled>这段内容不可编辑</textarea>
选择类元素
<!-- 禁用下拉选择框 --> <select name="city" disabled> <option value="bj">北京</option> <option value="sh">上海</option> </select> <!-- 禁用单选框 --> <input type="radio" name="gender" value="male" disabled>男 <input type="radio" name="gender" value="female" disabled>女 <!-- 禁用复选框 --> <input type="checkbox" name="hobby" value="music" disabled>音乐
按钮元素
<!-- 禁用提交按钮 --> <button type="submit" disabled>提交</button> <!-- 禁用普通按钮 --> <input type="button" value="点击按钮" disabled>
disabled与readonly的区别
很多开发者会混淆disabled和readonly属性，两者的核心差异如下：
| 对比项 | disabled | readonly |
|---|---|---|
| 用户可操作性 | 完全不可操作，无法点击、输入、选择 | 仅不可编辑，但可以选择、复制内容 |
| 表单提交 | 值不会被提交到后端 | 值会正常提交到后端 |
| 适用元素 | 所有表单元素都支持 | 仅支持<input>、<textarea>等文本输入类元素 |
用JavaScript动态控制disabled状态
实际开发中经常需要根据业务逻辑动态切换表单元素的禁用状态，通过JavaScript操作元素的disabled属性即可实现。
// 获取id为phone的输入框元素
const phoneInput = document.getElementById('phone');
// 禁用该输入框
phoneInput.disabled = true;
// 启用该输入框
phoneInput.disabled = false;
// 切换禁用状态
phoneInput.disabled = !phoneInput.disabled;
下面是一个完整的动态控制示例，点击按钮切换输入框的禁用状态：
<input type="text" id="demoInput" placeholder="测试输入框">
<button onclick="toggleDisable()">切换禁用状态</button>
<script>
function toggleDisable() {
const input = document.getElementById('demoInput');
input.disabled = !input.disabled;
}
</script>
注意事项
- 被disabled的表单元素无法通过tab键获得焦点，也不会触发任何鼠标或键盘事件。
- 如果需要对禁用的表单元素设置样式，可以通过
input[disabled]CSS选择器来匹配。 - 不要在disabled属性的值中写其他内容，只需要写disabled或者省略属性值即可，避免兼容性问题。