disabled 的值不会包含在表单提交中，readonly 的值会；readonly 仅对 text、password 和 textarea 有效，对 select、checkbox 等无效；disabled 元素无法聚焦或选中，且属性存在即生效。
readonly 的值会包含在表单提交中，disabled 的值不会。
submit 时哪些字段会被浏览器忽略
浏览器原生表单提交（GET 或 POST）会自动过滤掉所有带 disabled 属性的表单控件，无论它是 <input>、<select>、<textarea> 还是 <button>。这个行为由 HTML 规范定义，不是 JS 控制的。
readonly 不影响提交逻辑，只限制用户编辑；只要控件在 DOM 中且未被 disabled，它的 name 和 value 就会出现在提交数据里。
- 常见错误：给
<input type="hidden">加disabled，结果后端收不到该字段 —— 应该用readonly或直接不加任何属性（隐藏域本就不该交互） - 更隐蔽的问题：用 JS 动态设
disabled=true后忘记在提交前恢复，或误以为“视觉禁用=逻辑保留”，导致关键字段丢失
readonly 只对部分元素生效
readonly 是个“半兼容”属性：它只对 <input type="text">、<input type="password"> 和 <textarea> 有效。对 <select>、<input type="checkbox">、<input type="radio"> 等加 readonly 完全没效果 —— 浏览器会静默忽略。
所以当你需要让下拉框或复选框“只读但可提交”，唯一可靠方式是：disabled + 提前把值存到隐藏域（<input type="hidden">），或者用 JS 拦截交互并保持原值不变。
- 别写
<select readonly>—— 它等同于没写 - 如果必须禁用
<select>但又要传值，加一个同步的<input type="hidden" name="xxx" value="yyy">
disabled 元素无法通过 focus() 或 select() 操作
哪怕你用 JS 调用 element.focus() 或 element.select()，对 disabled 元素也完全无效。而 readonly 元素可以正常聚焦、选中文本、触发 focus 事件，只是不能输入。
这点直接影响调试和自动化测试：
- 用 Cypress 或 Playwright 写 E2E 测试时，对
disabled元素调.focus()会失败或静默跳过 - 想让用户快速复制预填内容？
readonly支持双击选中，disabled连鼠标都点不进去 - 某些屏幕阅读器对
disabled元素默认跳过，可能影响无障碍访问
最常被忽略的一点：disabled 是布尔属性，写成 disabled="false" 并不会启用它 —— 只要属性存在，就禁用；移除整个属性才生效。而 readonly 同理。别在模板里写 disabled="{{ isDisabled ? 'true' : 'false' }}"，应该用条件逻辑控制属性是否存在。
