html5中禁用表单控件应优先使用disabled属性，它使元素不可交互、不提交、不聚焦；fieldset支持递归禁用子控件；disabled与readonly本质不同，前者彻底移除参与表单流程的能力，后者仅禁止编辑但保留提交和聚焦；js动态控制时需同步处理焦点与验证，且服务端必须二次校验。
直接用 disabled 属性禁用单个表单控件
HTML5 中禁用表单元素最直接的方式，就是在对应标签上加 disabled 布尔属性。它适用于 <input>、<textarea></textarea>、<select></select>、<button></button> 等可交互元素。
注意：加了 disabled 的元素不会被提交（form.submit() 或表单自动提交时忽略），且默认变灰、失去焦点能力。
<input type="text" name="username" value="admin" disabled> <select name="role" disabled> <option>Admin</option> <option>User</option> </select> <button type="submit" disabled>提交</button>
-
disabled是布尔属性，写成disabled="disabled"或仅disabled效果一致，推荐简写 - 不能通过 CSS 的
pointer-events: none模拟禁用效果——它不阻止表单提交，也不影响可访问性（屏幕阅读器仍会读出该控件） -
fieldset也支持disabled，它会递归禁用内部所有表单控件
用 fieldset 批量禁用一组控件
当需要一次性禁用多个相关表单元素（比如一个地址区块、一组权限开关），把它们包进 <fieldset></fieldset> 并对其设置 disabled，比逐个加属性更简洁、语义更清晰。
<fieldset disabled> <legend>收货地址</legend> <input type="text" name="addr1"> <input type="text" name="addr2"> <select name="city"><option>北京</option></select> </fieldset>
- 被禁用的
fieldset内部所有控件都不可交互、不参与提交，包括嵌套的fieldset - 即使某个子控件显式写了
disabled="false"，也会被父fieldset的disabled覆盖（HTML 规范明确要求） - 注意视觉样式：部分浏览器对禁用的
fieldset默认加边框淡色，可用 CSS 微调，但别用opacity遮盖——它不影响可访问性状态
disabled 和 readonly 的关键区别
两者都限制用户输入，但行为完全不同，选错会导致逻辑错误或提交异常。
立即学习“前端免费学习笔记（深入）”；
-
disabled：控件不可交互、不聚焦、不提交、不触发change或input事件 -
readonly：仅对<input>（text/search/tel/url/email/password/number）和<textarea></textarea>有效；用户不能编辑，但能聚焦、能选中文本、会随表单提交、会触发focus等事件 - 常见误用：
<select disabled></select>写成<select readonly></select>——后者完全无效，浏览器直接忽略 - 若需“显示但不可改 + 必须提交”，用
readonly；若需“彻底下线 + 不参与流程”，必须用disabled
JavaScript 动态控制禁用状态的注意事项
用 JS 切换 disabled 时，别只操作 DOM 属性，要同步考虑表单验证、焦点管理与可访问性。
const input = document.querySelector('input[name="phone"]');
input.disabled = true; // ✅ 正确：设为 true/false
input.setAttribute('disabled', ''); // ⚠️ 可行但冗余，优先用 .disabled = boolean
input.removeAttribute('disabled'); // ✅ 解除禁用
- 禁用后记得移除焦点：如果当前元素已获得焦点，执行
input.blur()，否则键盘操作可能卡住 - 禁用
<select></select>后，其selectedIndex仍保留，但用户无法更改；恢复启用时值不会丢失 - 不要依赖
input.disabled === false来判断是否“可用”——某些场景下你可能需要结合fieldset状态或自定义data-属性做复合判断 - 服务端永远要二次校验：前端禁用只是体验优化，恶意请求仍可绕过，禁用字段的业务规则必须在后端重检
disabled，可能让辅助技术用户卡在空白按钮上，也可能让后端收到意外空值。动手前先想清楚：你是想“暂时不让点”，还是“这个字段此刻不该存在”。 
