JS中禁用/启用表单控件须直接操作原生元素（input、textarea、select、button、fieldset）的disabled布尔属性；div等非表单元素设disabled无效；推荐用form.elements或querySelectorAll获取控件并统一赋值true/false；禁用后需手动处理焦点，且服务端必须校验。
在 JS 中禁用或启用表单中的所有输入控件，核心是正确操作 disabled 属性——它必须直接作用于原生可交互元素（如 input、textarea、select、button、fieldset），且只能通过布尔赋值控制。
哪些元素能被 disabled 真正禁用
只有以下原生表单控件支持 disabled 属性并产生完整效果（不可聚焦、不响应点击、值不提交、视觉灰化）：
-
input（含text、password、checkbox、radio、submit等所有类型） textarea-
select及其子元素option、optgroup button-
fieldset（会递归禁用所有子表单控件）
注意：div、span、label、p 等非表单元素加 disabled 属性完全无效，浏览器直接忽略。
批量禁用/启用的推荐写法
获取表单内所有可禁用控件，统一设 .disabled = true 或 false：
// 禁用整个表单中所有可禁用控件
const form = document.querySelector('form');
const controls = form.querySelectorAll('input, textarea, select, button, fieldset');
controls.forEach(el => el.disabled = true);
// 启用全部（注意：必须显式设为 false，不能只删属性）
controls.forEach(el => el.disabled = false);
更稳妥的做法是限定范围，避免误操作嵌套 fieldset 内已禁用的子项：
- 用
form.elements（返回所有表单控件的集合，含input、textarea、select、button、fieldset） - 对
fieldset单独处理：设disabled = true即可批量禁用其内部所有子控件
常见错误和避坑要点
这些写法看似合理，但实际不可靠或有副作用：
-
el.setAttribute('disabled', '')或el.setAttribute('disabled', 'true')—— 属于冗余写法，语义不严谨，部分旧浏览器行为异常 -
el.removeAttribute('disabled')—— 虽能启用，但后续再设disabled = true在某些 Safari 版本可能失效 - 禁用后不处理焦点：若当前元素正获得焦点，Tab 键仍会卡住，应手动调
nextElement.focus() - 混用
readonly和disabled：比如想“显示但不提交”，误用disabled会导致后端收不到值；该场景必须用readonly
服务端校验不可省略
disabled 是纯前端状态，用户可轻松通过开发者工具删除属性或直接发请求绕过。任何涉及权限、业务逻辑的禁用，都必须在服务端二次校验字段是否允许提交、值是否合法。前端禁用仅用于体验引导与防误操作。
