`disabled` 的表单控件会被浏览器“锁定”

问题描述

你有一个禁用的单选按钮（disabled + checked），在浏览器开发者工具（F12）中直接修改它的 checked 属性时，发现：

• 手动修改 checked 属性无效（即使改成 true 也不生效）。
• 只有用鼠标点击才能选中（但 disabled 状态下又不能点击）。

疑问：

1. 为什么直接修改 checked 属性不起作用？
2. 如何在开发者工具（F12）中强制修改它的选中状态？

---

1. 为什么直接修改 checked 属性不起作用？

原因：disabled 的表单控件会被浏览器“锁定”

• disabled 的 <input> 不仅不能交互，它的属性（如 checked）也不能通过常规方式动态修改。
• 即使你在开发者工具里手动修改 checked="true"，浏览器仍然会 忽略这个更改，因为 disabled 的控件会被视为“只读”。
• 只有非 disabled 的表单控件才能通过 JS 或开发者工具动态修改 checked。

---

2. 如何在开发者工具（F12）中强制修改它的选中状态？

方法 1：先移除 disabled，再修改 checked

1. 在开发者工具中选中该 <input>：

   <input name="Test" type="radio" value="3" disabled="disabled" checked="checked">
   

2. 右键 → “Edit as HTML”（或直接双击 disabled 属性）：
   • 删除 disabled="disabled"。
   • 确保 checked="checked" 存在（或手动添加）。
3. 按 Enter 确认修改，这时它应该显示为选中状态。

方法 2：用 JavaScript 强制修改

如果页面允许执行 JS，可以在控制台运行：

document.querySelector('input[name="Test"]').disabled = false; // 先取消禁用
document.querySelector('input[name="Test"]').checked = true;  // 再选中

然后你可以重新 disabled = true（如果需要保持禁用但选中）。

方法 3：使用 readonly（但 radio 不支持 readonly）

<input type="radio"> 没有 readonly 属性，但你可以模拟：

<input type="radio" name="Test" value="3" checked onclick="return false;">

这样：

• 它仍然显示 checked 状态。
• 用户不能点击修改，但开发者工具可以修改 checked。

---

3. 为什么鼠标点击可以选中，但 disabled 时不行？

• 非 disabled 的单选按钮：
  • 可以通过 点击 或 JS 修改 checked 来选中。
• disabled 的单选按钮：
  • 不能点击（浏览器阻止交互）。
  • JS 修改 checked 会被忽略（浏览器强制锁定状态）。

---

4. 终极解决方案：让 disabled + checked 既能显示选中，又能用代码修改

如果你希望：

• 视觉上：disabled 的单选按钮仍然显示 checked 状态（有小圆点）。
• 代码上：仍然可以通过 JS 或开发者工具修改 checked。

使用 CSS 模拟 disabled 样式，但实际不禁用

<input type="radio" name="Test" value="3" checked class="readonly-radio">

<style>
.readonly-radio {
  opacity: 0.6;  /* 看起来像 disabled */
  pointer-events: none; /* 禁止鼠标交互 */
}
</style>

这样：

• 视觉上：看起来像 disabled（灰色、半透明）。
• 代码上：仍然可以修改 checked（因为没真正 disabled）。

---

总结

问题	原因	解决方案
直接修改 disabled radio 的 checked 无效	浏览器锁定 disabled 控件的状态	先移除 disabled，再改 checked
希望 disabled radio 仍然显示 checked	浏览器默认隐藏 disabled 的选中标记	用 CSS :disabled:checked 强制显示
希望单选按钮不可修改但仍能代码控制	radio 没有 readonly	用 pointer-events: none + opacity 模拟禁用

推荐方法：

<input type="radio" name="Test" value="3" checked class="fake-disabled">

<style>
.fake-disabled {
  opacity: 0.6;
  pointer-events: none;
}
</style>

这样：

• 用户不能点击修改（pointer-events: none）。
• 开发者工具和 JS 仍然可以修改 checked（因为没真正 disabled）。