如何使单选按钮只读但不禁用？答案

【问题标题】：How to make a radio button read-only but not disabled?如何使单选按钮只读但不禁用？
【发布时间】：2016-11-10 03:02:00
【问题描述】：

问题“如何将单选按钮设为只读？”已经被问过n 次。但解决方案始终是disabled="disabled"。

（也可能有复杂的 JavaScript 解决方案，它们与 click 或 change 事件一起工作并阻止值的更改，但所有这些通常或多或少都带有一种肮脏的黑客的味道。）

disabled="disabled" 的问题/副作用是，它从数据集中“删除”该字段，然后不发送到服务器。

我想要的是使单选按钮只读/不可更改——但同时让它们在表单提交时发送到服务器。 disabled 不符合此要求，readonly 似乎不适用于单选按钮。

什么是使单选按钮只读而不从表单数据集中删除的正确 HTML 属性？

【问题讨论】：

为什么不只使用图像和隐藏字段？

标签： html disabled-input readonly-attribute

【解决方案1】：

尝试使用一些 CSS：

input[type="radio"].readonly {
  opacity: 0.5; /* not necessary */
  pointer-events: none;
}

【讨论】：

只想指出 pointer-events 与 IE (caniuse.com/#search=css%20pointer-events) 有一些问题，但你为什么要首先使用 IE。

【解决方案2】：

如果这就是你的意思。你有一个radio button，它有一个值，你不希望该值被删除或更改，但你想将它显示给用户可能会通知他的同意。那么我认为这应该可行。

给radio button 一个单独分配给它的name 属性以及像这样的checked 属性。

<input type="radio " name="my_radio_btn" value="its_value" checked />

这样，用户不能取消选中它

【讨论】：

感谢您的回答，但checked 需要一个值——checked 或一个空字符串（s.specification）。 checked="" 不会阻止更改。
那么您找到解决问题的方法了吗？
不，很遗憾没有。唯一干净的解决方案是像readonly 这样的属性。其他一切都是或多或少肮脏的解决方法。但似乎没有这样的属性（还）。

【解决方案3】：

这可能看起来有点老套，但您可以将单选按钮的值设置为其在触发 onclick 事件时的初始状态。

<!DOCTYPE html>
<html>
  <body>
    <input id="button1" type="radio" onmouseover="setValue(this)" onclick="retainValue(this)" checked> Radio Example
    <input id="button2" type="radio" onmouseover="setValue(this)" onclick="retainValue(this)"> Radio Example
    <script>
      var checkboxes = {};
      function setValue(el) {
        if(!(el.id in checkboxes))
          checkboxes[el.id] = el.checked;
      }
      function retainValue(el) {
        if(!(el.id in checkboxes))
          checkboxes[el.id] = el.checked;
        el.checked = checkboxes[el.id];
      }
    </script>
  </body>
</html>

它允许您在页面上拥有任意数量的收音机，只要每个收音机都有一个唯一的 ID。

如果你愿意使用 jQuery，那么它会很容易完成。

【讨论】：