如何使单选按钮只读但不禁用？
Posted
技术标签:
【中文标题】如何使单选按钮只读但不禁用？【英文标题】：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 属性？
【问题讨论】：
为什么不只使用图像和隐藏字段？ 【参考方案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，那么它会很容易完成。
【讨论】：
以上是关于如何使单选按钮只读但不禁用？的主要内容，如果未能解决你的问题，请参考以下文章