input标签的readonly和disabled有什么区别？HTML表单禁用状态解析

readonly 只锁编辑，不锁其他一切

readonly 仅对 、、 等文本类输入框，以及 </code> 有效；它<strong>允许聚焦、允许复制、允许选中、允许提交值</strong>，只是不让用户改内容。</p> <ul><li><code><input type="text" value="ID-789" readonly></code> → 用户能 Tab 进去、Ctrl+A 全选、Ctrl+C 复制、提交时照样带上 <code>ID-789</code></li> <li><code><select readonly></code> 或 <code><input type="checkbox" readonly></code> → 完全无效，浏览器直接忽略该属性</li> <li>视觉上通常没变化（不会自动变灰），得靠 CSS 额外加 <code>opacity: 0.6</code> 或 <code>background: #eee</code> 才像“禁用”</li> <li>如果字段本应不可改但又必须提交（比如预填的用户 ID），就该用 <code>readonly</code>；若连查看和复制都不允许，就得换 <code>disabled</code> 或配合 <code>display: none</code></li> </ul><h3>fieldset 上设 disabled 是批量禁用的正确姿势</h3> <p>想一次性禁用一组控件（比如“企业信息”区块），别一个个加 <code>disabled</code>，直接用 <code><fieldset disabled></code> 包裹：</p> <pre class="brush:php;toolbar:false"><fieldset disabled> <input name="company" value="ABC"> <select name="industry"><option>IT</option></select> <textarea name="desc">...

• 内部所有支持 disabled 的子控件（input、select、textarea、button）都会被递归禁用
• 子控件即使显式写了 disabled="false" 也没用——fieldset 的禁用优先级更高
• 文本不受影响，仍可读、可聚焦，这对屏幕阅读器是友好设计，不是 bug
• 注意：
  标签本身不支持 disabled，fieldset 是最接近“禁用整个表单”的原生方案

JS 动态控制时最容易忽略的三个细节