在HTML表单开发中，disabled属性是控制表单元素交互状态的核心属性之一，添加到表单控件上后，该元素会直接变为不可用状态，用户无法点击、输入或修改其内容，同时该元素的值也不会被包含在表单提交的数据中。
disabled属性的基本语法
disabled属性是布尔类型的属性，只需要在目标表单元素上添加该属性即可生效，不需要赋值，当然也可以写成disabled="disabled"的形式，两种写法效果完全一致。以下是基础的禁用输入框的示例：
<!-- 简写形式 --> <input type="text" name="username" disabled> <!-- 完整形式 --> <input type="text" name="email" disabled="disabled">
支持disabled属性的表单元素
大部分原生的HTML表单控件都支持disabled属性，常见的包括：
- input系列：text、password、radio、checkbox、submit、reset、button等类型的input元素
- textarea多行文本输入框
- select下拉选择框
- option下拉选项
- optgroup下拉选项分组
- button按钮元素
以下是不同表单元素使用disabled属性的示例：
<form>
<!-- 禁用单选框 -->
<input type="radio" name="gender" value="male" disabled> 男
<input type="radio" name="gender" value="female"> 女
<!-- 禁用下拉框 -->
<select name="city" disabled>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<!-- 禁用多行文本框 -->
<textarea name="intro" disabled>默认内容</textarea>
<!-- 禁用提交按钮 -->
<button type="submit" disabled>提交</button>
</form>disabled和readonly的区别
很多开发者会混淆disabled和readonly属性，两者的核心差异如下：
| 对比项 | disabled | readonly |
|---|---|---|
| 用户交互 | 完全不可交互，无法点击、输入、聚焦 | 可以聚焦、选中文本，但无法修改内容 |
| 表单提交 | 值不会被提交 | 值会被正常提交 |
| 适用元素 | 几乎所有表单控件 | 仅支持text、password、textarea等有输入行为的元素 |
通过JavaScript动态控制disabled状态
实际开发中经常需要根据业务逻辑动态切换表单元素的禁用状态，可以通过JavaScript操作元素的disabled属性实现：
// 获取目标元素
const submitBtn = document.querySelector('button[type="submit"]');
const inputEle = document.querySelector('input[name="username"]');
// 禁用元素
submitBtn.disabled = true;
inputEle.disabled = true;
// 启用元素
submitBtn.disabled = false;
inputEle.disabled = false;使用注意事项
- 被disabled的元素无法触发click、focus等交互事件，事件监听不会生效
- 如果要禁用整个表单的所有元素，可以直接给form标签添加disabled属性，不过部分浏览器可能不支持，更稳妥的方式是遍历表单内所有控件逐个设置
- disabled属性不需要写值，写成<input disabled="true">和<input disabled>效果一致，但推荐用简写形式更符合规范
- 如果需要临时禁止用户修改但后续还要提交值，应该优先选择readonly而不是disabled
掌握disabled属性的使用方法，能够帮助开发者更灵活地控制表单的交互逻辑，避免不必要的用户操作，提升表单的可用性和数据准确性。
HTMLdisabled属性表单控件表单元素修改时间：2026-06-04 18:11:01