直接加disabled属性是唯一真正禁用表单控件的方式，仅对input、textarea、select、button、fieldset等原生表单控件生效，禁用后不可聚焦、不响应事件、值不提交；JS应使用element.disabled=true/false控制，服务端必须校验。
直接给 <input> 加 disabled 属性是最简单、最可靠的方式，它会让输入框不可编辑、不响应点击、无法聚焦，且提交时完全忽略该字段的值。
用 HTML 原生 disabled 属性禁用 input
只需在标签里写 disabled，无需任何值：
<input type="text" name="username" disabled> <input type="email" value="test@example.com" disabled>
注意：disabled="false" 或 disabled="" 都会生效——只要属性名存在，就禁用。浏览器不解析它的值，只看是否存在。
- 仅对原生表单控件有效：
<input>、<textarea>、<select>、<button>、<fieldset>等 - 对
<div>、<span>、<label>加disabled完全无效 - 禁用后，该字段的值不会出现在
FormData或form.serialize()结果中
用 JavaScript 动态控制 disabled 状态
别用 setAttribute('disabled', '') 或 removeAttribute('disabled')，它们语义不清、兼容性差，且在某些 Safari 版本中启用后再次禁用会失效。
立即学习“前端免费学习笔记（深入）”；
正确写法是直接操作 DOM 属性：
const input = document.getElementById('myInput');
input.disabled = true; // 禁用
input.disabled = false; // 启用
if (input.disabled) { ... } // 检查状态，返回布尔值
- 禁用后焦点可能卡住：用户按 Tab 还会停在已禁用元素上，建议手动调
nextElement.focus() - 在 Vue/React 中，仅改 DOM 的
.disabled不会同步响应式数据，必须同时更新data或state - 如果该
<input>带有required，禁用后验证自动跳过，但checkValidity()缓存可能残留，可调一次reportValidity()清理
用 fieldset 批量禁用一组输入框
把多个控件包进 <fieldset disabled> 是最简洁的批量方案，浏览器会递归禁用所有子表单控件（包括嵌套的 <fieldset>）：
<fieldset disabled> <legend>联系信息</legend> <input type="tel" name="phone"> <input type="email" name="email"> <select name="country"></select> </fieldset>
- 子元素显式写
disabled="false"也无效，父级fieldset的禁用状态强制覆盖 -
<legend>文本不受禁用影响，仍可聚焦、可读取；如需一并屏蔽，得额外加 CSS 或 JS - Safari 和 IE11 下，若
fieldset设了display: flex或grid，部分子控件可能视觉灰显但焦点可入
disabled 和 readonly 的关键区别不能混用
选错会导致后端收不到数据或逻辑异常：
-
disabled：控件彻底退出表单流程——不聚焦、不触发input/change事件、不参与提交 -
readonly：仅禁止编辑，但允许聚焦、复制、选中文本，且值照常提交（只对<input>和<textarea>有效） - 典型错误：登录页用户名框设成
disabled，结果后端收不到用户名——其实该用readonly - 服务端永远不能信任前端禁用了什么，绕过只需删掉属性或发个 POST 请求，权限校验必须在后端做
