禁用Disabled
你可能会说
表单没填完之前，提交按钮要是灰的、点不了。
禁用是表示控件当前不能执行操作的交互状态除降低视觉强调，还应就近说明暂不可操作的原因，不能只靠文字提示 Tooltip。原生 disabled 控件通常不能获得焦点；aria-disabled 只表达语义，元素通常仍可聚焦，必须由脚本阻止操作并决定焦点策略。长期无权限的入口是否隐藏，要看用户是否需要知道功能存在。
什么时候用
- 提交提交
- 表单未完成时若禁用提交，应就近说明缺少的内容lin@example.com密码（必填）注册还有必填没填，提交保持禁用
- 原因直接写在旁边：让键盘和触屏用户也能看到请先填写密码注册
- 提交中防重复点击：请求没回来前禁用，避免重复下单提交中…
什么时候不用
- 禁用了不说明原因：只显示灰色不可用状态，却不说明缺少的输入、库存或权限立即购买
- 对长期无权限入口直接隐藏：用户可能不知道功能存在或如何申请；应按信息价值决定普通成员
- 不可用态与可用态差异不足：用户可能误判为可操作删除项目
- 状态与行为不一致：控件看似可用却不响应操作提交
组成结构 · Anatomy
提交🚫 点击无效提示：先填邮箱
降低视觉强调，同时保持文字和状态仍可识别
原生 disabled 通常会阻止交互与焦点；aria-disabled 只表达语义，仍需脚本阻止操作并决定焦点策略
说明当前不可用的原因以及恢复条件
常见变体 · Variants
原生禁用Native disabled
提交
原生 button、input 等当前确实不可操作时；外观数值按系统验证
禁用 + 提示With Reason
注册先填密码
需要说明当前不可用及其恢复条件
直接隐藏Hidden
（不渲染）
该操作在当前情境中不适用，也无需解释时
典型使用场景
表单未填完禁用提交
注册账号
还有必填项没填，提交按钮保持禁用
无权限操作置灰
提交中防重复点击
机械键盘 ×1¥ 199.00
配送至：深圳市南山区 · 林小hu 收
请求返回前禁用，防止重复下单
售罄商品不可购买
已售罄
限量猫咪摆件
¥ 89 · 补货时间待定
延伸阅读 · 权威出处