disabled是唯一可靠禁用表单元素的方案，因其原生支持禁止聚焦、拦截输入、跳过序列化；其他方式如css仅改样式，无法真正阻止交互与提交。

禁用表单元素必须用 disabled 属性，其他方式（比如 CSS 或只读）都不能真正阻止交互和提交。

为什么 disabled 是唯一可靠方案

浏览器对 disabled 有原生语义支持：它会同时做到三件事——禁止聚焦、拦截用户输入、跳过表单序列化。而 pointer-events: none 或 opacity: 0.5 只改样式，Tab 键仍能聚焦，回车仍可能触发表单提交，后端照样收到值。

• disabled 是布尔属性，写成 <input disabled> 或 <input disabled> 效果一样，推荐前者
• 加了 disabled="false" 没用——只要属性存在，就生效，值是什么不影响
• <form></form> 标签本身不支持 disabled，但可以用 <fieldset disabled></fieldset> 包裹实现等效效果

disabled 和 readonly 到底怎么选

别凭感觉，看两个关键行为差异：

• 值是否提交：disabled 的字段一定不会出现在 FormData 或 form.submit() 请求体中；readonly 的字段照常提交
• 适用范围：readonly 对 <select></select>、<input type="checkbox">、<input type="radio"> 完全无效；disabled 支持所有可交互表单控件
• 焦点与可访问性：disabled 元素无法被 Tab 键聚焦，屏幕阅读器会播报 “unavailable”；readonly 元素仍可聚焦、可选中、可复制

常见误用：用 readonly 锁住下拉框，结果用户根本点不开——该换 disabled。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

JS 动态控制时最容易翻车的三个点

直接操作 .disabled 属性比 setAttribute 更稳，但仍有坑：

• 禁用后，如果元素原本有 required，HTML5 验证会自动跳过它；但若之前手动调过 checkValidity()，状态可能残留，建议禁用后也调一次 reportValidity() 清理
• 禁用当前聚焦元素时，焦点不会自动移走，键盘操作可能卡住；应手动 focus() 到下一个可用元素
• 在 Vue/React 中，仅改 DOM 的 .disabled 不够，必须同步更新响应式数据或 state，否则下次 re-render 会覆盖你的禁用状态

fieldset 批量禁用的隐藏规则

把一组控件包进 <fieldset disabled></fieldset> 是最省事的批量方案，但要注意：

• 内部所有子控件（包括嵌套的 <fieldset></fieldset>）都会被递归禁用，哪怕子元素显式写了 disabled="false" 也没用
• <legend></legend> 文本不受影响，仍可聚焦、可读取，这对可访问性是好事，但别指望它也被禁用
• 部分老浏览器对禁用 fieldset 的默认样式支持不一致，可用 CSS 微调，但别用 opacity 遮盖——它不改变可访问性状态

服务端永远别信前端禁用了什么，绕过 disabled 太容易；权限判断和字段校验必须落在后端，这是底线。

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