后端能否收到字段值是唯一判断依据：disabled字段不提交，readonly字段正常提交；前者彻底禁用交互且值被浏览器过滤，后者允许聚焦、复制并保留提交能力。
表单提交时字段值会不会发到后端
这是唯一不可妥协的判断依据。用 disabled，后端根本收不到这个字段；用 readonly，它和普通输入框一样参与提交。
常见错误现象：<input name="user_id" value="789" disabled> 提交后，后端日志查不到 user_id，接口报“缺少必传参数”，基本就是这个原因。
-
disabled字段被浏览器彻底过滤：无论用form.submit()、new FormData(form)还是 jQuery 的.serialize()，都拿不到它的name和value -
readonly字段值照常出现在请求体里，request.getParameter("user_id")或等价方式能正常取到 - 管理后台编辑页中预填的 ID、手机号、订单号——只要后端需要，就必须用
readonly，不是“看起来不能改”就行
哪些元素支持 readonly，哪些只认 disabled
readonly 不是万能锁，它只对特定元素生效；disabled 才是通用禁用开关。
- 支持
readonly的只有：<input type="text">、<input type="password">、<input type="email">、<textarea> -
<select readonly>、<input type="checkbox" readonly>、<button readonly>—— 浏览器直接忽略，等于没写 -
disabled通吃全部：<select>、<button>、<fieldset>都支持；<fieldset disabled>还能递归禁用内部所有子控件 - 想实现“只读下拉框”？别写
readonly，要么换成<input type="text" readonly>模拟，要么 JS 禁用每个<option disabled>，或者纯文本展示
用户能不能聚焦、选中、复制内容
这直接影响功能可用性，不是“锦上添花”，而是刚需。
立即学习“前端免费学习笔记（深入）”；
-
readonly允许：Tab切入、鼠标点击聚焦、.focus()、双击选中、Ctrl+A、Ctrl+C；也支持监听focus事件 -
disabled彻底阻断：Tab跳过、.focus()静默失败、无法选中或复制；:focus伪类不触发，outline也不显示 - 展示 API Key、调试 ID、金额等需复制的字段，必须用
readonly；用disabled用户点不动、选不了、也复制不了 -
readonly默认不灰化，建议手动加 CSS：input[readonly] { background: #f5f5f5; cursor: not-allowed; }
JavaScript 动态控制时怎么写才安全
脚本切换状态比静态 HTML 更容易翻车，尤其跨浏览器兼容性。
- 设
disabled：直接写el.disabled = true或el.disabled = false，安全可靠 - 设
readonly：避免el.readOnly = false（某些旧版 Safari 不响应），稳妥做法是el.removeAttribute('readonly')启用，el.setAttribute('readonly', '')禁用 - 别同时写
readonly和disabled：disabled优先级更高，readonly形同虚设，还掩盖真实逻辑 - React/Vue 中绑定
readOnly属性时，注意 UI 库（如 Ant Design）可能没强调它不影响提交，测试阶段才发现后端少字段
