最简单禁用表单控件是直接添加 disabled 布尔属性，存在即生效；js 应统一用 el.disabled = true/false 控制，避免混用 setattribute；fieldset disabled 可批量禁用子表单元素，但不作用于自定义组件、shadow dom 或 portal 渲染内容；option disabled 仅禁用下拉项，不影响整个 select。

直接写 disabled 属性最简单

HTML 里禁用表单控件，第一反应就是加 disabled 属性。它是个布尔属性，存在即生效，不用赋值：

• <input type="text" disabled>
• <select disabled><option>选我</option></select>
• <button disabled>提交</button>
• <textarea disabled></textarea>

注意：disabled="false" 或 disabled="" 都没用——只要属性存在，就禁用。浏览器会自动灰化、阻止聚焦、跳过表单提交。

JS 动态控制必须用 .disabled = true/false

别碰 setAttribute('disabled', '') 或 removeAttribute('disabled')，容易状态错位。统一走 DOM 属性赋值：

• 禁用：el.disabled = true
• 启用：el.disabled = false
• 判断：if (el.disabled) { ... }

混用会导致“看起来能点，但点不动”：比如先用 setAttribute 加了属性，再用 el.disabled = false，DOM 属性还在，浏览器仍以属性为准。原生表单元素只认这个布尔值。

批量禁用用

想一次性锁住一整组输入项，<fieldset disabled></fieldset> 是标准方案：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 里面所有 <input>、<select></select>、<textarea></textarea>、<button></button> 都继承禁用状态
• 子元素显式设 disabled = false 也无效，会被 fieldset 强制覆盖
• <legend></legend> 不受影响，文字可读但点击无效

但要注意：自定义组件（比如 div 模拟的下拉框）、Shadow DOM 内容、或通过 Portal 渲染到 body 的元素，不受 fieldset 控制——它们压根不响应这个继承机制。

禁用选项用

只让下拉框里的某几项不可选，不是整个 select 冻结：

• <option value="old" disabled>已停用套餐</option>
• 该选项保留在 DOM 中，视觉灰化，键盘和鼠标都无法选中
• 提交时不会包含这个 name=value 对，FormData 里找不到它
• 别误写成 <select disabled></select>——那是整个控件锁死，连可用项也点不了

移动端 Safari 对 option disabled 的灰度显示较弱，建议加内联样式 style="color: #999;" 补充提示。

真正容易被忽略的不是怎么写代码，而是禁用后是否同步清理交互状态：比如按钮禁用时焦点还停在上面，用户按 Tab 就卡住；或者表单验证通过后没及时 el.disabled = false，导致用户以为功能坏了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！