如何使辐射按钮为只读但未禁用？

问题描述：

问题“如何使单选按钮只读？”已被询问n次。但解决方案始终是disabled="disabled"。如何使辐射按钮为只读但未禁用？

（这里也可以是复杂的JavaScript的解决方案，与click或change事件工作，防止值的变化，但所有的具有通常或多或少肮脏的黑客的气味。）

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

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

将按钮设置为只读而不将其从表单数据集中删除的正确HTML属性是什么？

为什么不只是使用图像和隐藏的领域？ –

答

尝试使用一些CSS：

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

只想指出'pointer-events'在IE中有一些问题（http://caniuse.com/#search=css%20pointer-events），但是为什么你会首先使用IE。 – Th3Gam3rz

确实有帮助.. – Mask5323

答

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

给予radio button a name属性，该属性单独分配给它，还有这样的checked属性。

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

通过这种方式，用户无法取消勾选

谢谢你的回答，但'checked'需要一个值 - 'checked'或一个空字符串（s。[specification]（https://www.w3.org/TR/html-markup /input.radio.html#input.radio.attrs.checked））。而'checked =“”'不会阻止更改。 – automatix

那么你有没有找到解决你的问题？ –

不，不幸的不是。唯一干净的解决方案就是像'readonly'这样的属性。其他一切都是或多或少肮脏的解决方法。但似乎没有这样的属性（尚未）。 – automatix

答

这似乎有点哈克，但你可以只设置单选按钮的价值是它的初始状态时，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，那么它会很容易完成。

如何使辐射按钮为只读但未禁用？

相关推荐