disabled 用法的核心答案是：disabled 是前端表单控件状态属性，用于给 button、input、textarea、select、fieldset 等元素标记关闭交互状态。页面需要等待条件满足、流程分段开放、功能状态切换时，可以用 disabled 让控件进入等待启用状态。HTML 中可直接写 disabled，JavaScript 中通过 disabled 属性切换状态，Vue、React、Angular 等框架可用数据绑定同步状态。
一、disabled 的适用元素
- button：提交按钮、确认按钮、下一步按钮
- input：文本框、复选框、单选框、输入型字段
- textarea：多行输入区域
- select：下拉选择控件
- option：下拉选项
- fieldset：表单分组容器
fieldset 适合分组关闭交互，让组内控件状态保持一致。
二、disabled 的常见使用场景
| 场景 | 推荐用法 | 状态表达 |
|---|---|---|
| 表单条件等待 | `` | 控件保持关闭交互状态 |
| JS 动态切换 | `button.disabled = true` | 按流程节点切换状态 |
| 框架数据绑定 | Vue：`:disabled="loading"` | 界面状态跟随数据变化 |
| 分组状态同步 | ` | 组内控件统一关闭交互 |
| 多步骤流程开放 | 根据步骤值控制 disabled | 当前步骤对应控件开放操作 |
三、基础写法
1. HTML 属性写法
```html
```
disabled 作为 HTML 属性出现时，可表达当前控件处于等待启用状态。
2. JavaScript 控制写法
```js
const button = document.querySelector( button );
function updateButtonState(enabled) {
button.disabled = !enabled;
}
```
页面状态由业务数据决定时，JavaScript 可同步更新 disabled 状态。
3. 表单分组写法
```html
```
fieldset 上的 disabled 状态可同步到组内表单控件，适合整段表单条件开放。
四、框架中的 disabled 用法
1. Vue 示例
```vue
```
2. React 示例
```jsx
function SubmitForm() {
const [submitting, setSubmitting] = useState(false);
const [ready, setReady] = useState(true);
return (
);
}
```
3. Angular 示例
```html
```
框架项目里，disabled 适合作为响应式状态的一部分，与数据层保持同步。
五、disabled 与状态设计建议
- 初始状态可提前标记，让界面呈现条件等待状态。
- 多步骤表单可用 disabled 表达步骤开放顺序。
- 异步流程进行中，可让操作按钮保持关闭交互状态。
- 分组字段可用 fieldset 统一状态，让界面层级更清楚。
- 需要保留文本选择与复制时，可使用 readonly 状态配合说明文案。
六、完整示例
```html
```
示例中，提交按钮根据表单内容状态动态切换 disabled，适合条件等待型页面反馈。
七、推荐实践
| 实践 | 做法 | 效果 |
|---|---|---|
| 状态同步 | 用业务数据控制 disabled | 界面反馈跟随流程变化 |
| 分组开放 | 使用 fieldset disabled | 整组控件状态统一 |
| 动态切换 | JavaScript 或框架绑定 | 页面状态实时表达 |
| 文案配合 | 配一句说明文字 | 用户了解当前开放状态 |
| 无障碍表达 | 结合 aria-disabled 或说明区域 | 状态提示更清晰 |
aria-disabled 适合表达辅助功能状态，disabled 适合实际关闭交互行为，两者可按需求搭配使用。
八、用法总结
disabled 适合前端表单控件状态表达，尤其在条件等待、流程分段开放、分组状态同步、异步操作反馈等场景中使用。基础写法是在 HTML 标签中添加 disabled；动态控制可用 JavaScript 切换 element.disabled；框架项目可用数据绑定同步状态；分组控件可用 fieldset 统一表达。配合说明文案与状态字段，页面反馈会更清楚。
【常见问题】
问题1：disabled 可以设置哪些元素？
回答1：disabled 适合 button、input、textarea、select、option、fieldset 等表单控件，可标记关闭交互状态。
问题2：disabled 和 readonly 怎么选择？
回答2：disabled 用于整体关闭交互和分组状态，readonly 用于保留文本选择与输入框内容，两者可按场景搭配。
问题3：disabled 提交表单时数据怎样处理？
回答3：disabled 用于关闭交互状态，表单提交数据通常由启用控件组成；需要提交时，可保留启用字段或采用 readonly 状态。
问题4：disabled 可以用全局属性表达吗？
回答4：disabled 是 HTML 全局属性，语义上更适合作用于表单控件，让界面状态表达保持一致。
免责声明：以上围绕 disabled 用法说明前端状态表达方式，实际项目请结合业务场景、浏览器环境和无障碍要求选择方案。