应只禁用带data-submit-ignore属性的非必填字段，避免禁用必填项导致验证失效或数据丢失；disabled可彻底排除字段于FormData外，readonly则仍提交且无法屏蔽所有控件。
提交时动态禁用非必填字段，不是为了“隐藏数据”，而是防止用户在异步提交过程中误操作、重复点击，或干扰表单序列化逻辑。关键在于：禁用动作必须发生在 submit 事件触发后、实际请求发出前，且只禁用那些本就不参与业务校验的字段（如辅助描述、备注、可选上传），同时确保必填项仍能正常验证和提交。
为什么不能在 submit 前全局禁用所有 input
直接对整个 form 或所有 input 执行 el.disabled = true 会破坏 HTML5 表单验证行为：即使某个 input 有 required 属性，一旦被禁用，checkValidity() 就跳过它，导致“必填却没填”也通过校验；更严重的是，禁用后它的值根本不会进 FormData —— 即使它是非必填但业务上必须提交（比如 comment 字段），也会丢数据。
- 禁用必填字段 → 验证失效，后端收不到该字段，可能报错或逻辑异常
- 禁用带
value的非必填字段 → 该值从FormData中彻底消失，不是“可选”，是“丢失” - 禁用
file类型输入 → 浏览器会清空已选文件，不可逆
正确做法：只禁用明确标记为“提交时可忽略”的字段
给需要动态禁用的非必填字段加一个自定义属性，比如 data-submit-ignore，然后在 submit 事件里精准筛选并禁用它们。这样既不影响验证，又避免干扰主流程。
- HTML 中标注：
<input type="text" name="remark" data-submit-ignore> - JS 中处理：
event.preventDefault()后，遍历form.querySelectorAll('[data-submit-ignore]')，逐个设el.disabled = true - 禁用后立即构建
FormData，此时被禁用的字段不会被包含 —— 这正是你想要的“不提交”效果 - 请求完成后，记得恢复：
el.disabled = false，否则用户刷新页面前无法再编辑
disabled 和 readonly 在提交场景下的行为差异
别用 readonly 替代 disabled 来“屏蔽”非必填字段 —— 它们语义和结果完全不同。
立即学习“前端免费学习笔记（深入）”；
-
readonly只对<input type="text">和<textarea>有效；对select、checkbox、radio加了也无效 -
readonly字段的值照常提交，无法达到“不提交”的目的 -
readonly允许聚焦和复制，用户仍可干扰（比如粘贴覆盖内容），而你只是想让它“静默退出本次提交” -
disabled是唯一能让字段值彻底不出现在FormData或form.submit()请求体中的方式
容易被忽略的兼容性与副作用
禁用操作本身简单，但几个细节不处理就会出问题：
- 禁用后焦点没移走：如果用户正聚焦在一个刚被禁用的
input上，按 Tab 会卡住。建议禁用后手动调form.elements[0].focus()或保存原焦点元素再恢复 - fieldset 禁用不适用：虽然
<fieldset disabled>能批量禁用，但它会递归禁用所有子控件，包括你没打标data-submit-ignore的必填项，不能用于此场景 - 服务端永远不能信任前端禁用状态：用户删掉
disabled属性就能绕过。所以“非必填字段是否提交”最终应由后端判断字段是否存在或为空，而不是靠前端禁用控制
