做表单常见这种需求：输入框里有值，但不许用户改，比如系统算好的优惠金额。这时用 readonly 还是 disabled，很多人分不清，用错了提交数据就丢。

readonly：只读，但值会提交

给 input 加 readonly 属性，输入框内容不能手动改，但焦点还能落上去，可以选中、复制，提交表单时这个字段的值照常发给后端。适合订单号、自动算出的合计这类「展示但不让改」的字段。文本类输入基本都支持，number、date 类型也认这个属性。

disabled：直接禁用，值不上传

disabled 是整个元素禁用：变灰、点不动、不响应事件，最关键的是提交时这个字段不会出现在请求数据里。适合没开通的功能项、要等其他条件满足才能填的输入框。调试时最常见的坑就在这：后端死活收不到参数，回头一看字段被 disabled 了。

四条对照看区别

  • 能不能手动改值：两者都不能
  • 提交时带不带值：readonly 带，disabled 不带
  • 能不能获得焦点：readonly 能，disabled 不能
  • Tab 键切换时：readonly 会被选中，disabled 直接跳过

代码怎么写、JS 怎么切

<input type='text' value='SF20261031' readonly>
<input type='text' value='暂不可填' disabled>

脚本里动态切换用 element.readOnly = true 或 element.disabled = true，注意 JS 属性名 readOnly 中间是大写 O，HTML 属性里全小写。CSS 也有对应的 :read-only 和 :disabled 伪类，可以分别控制两种状态的样式。另外 select 下拉框没有 readonly 这个说法，要用只能 disabled，checkbox 同理。

别拿它当安全手段

readonly 只是浏览器端的显示限制，用户开 F12 改 DOM，或者直接发请求，值照样能改，重要的字段后端必须再校验一遍。实际页面里常见这样的组合：购物车里单价不让改、数量让改，一个字段用 readonly，另一个用普通输入框，权限区分最后交给后端兜底。

选型很简单：值要提交就用 readonly，整个字段想从请求里消失就用 disabled。