logo标签列表

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

htmldisabled-inputreadonly-attribute
5
问题“如何使单选按钮只读？”已经被提出了n次。但是解决方案总是“disabled =” disabled“”。
（也可以有复杂的JavaScript解决方案，它们使用“click”或“change”事件并防止值的更改，但通常具有较少或多的不干净的黑客气味。） disabled =“disabled”的问题/副作用是，它“删除”数据集中的字段，然后不会发送到服务器。
我想要的是使单选按钮只读/不可更改-但同时让它们在表单提交时被发送到服务器。 disabled不符合此要求，readonly似乎对单选按钮无效。
正确的HTML属性是什么，可以使单选按钮只读而不将其从表单数据集中删除？
为什么不直接使用图像和隐藏字段呢？ - Daniel A. White
4个回答
7
尝试使用一些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
非常好的答案！！如果我可以改进它，您还需要相同的label.readonly CSS，如果单选按钮有一个标签，您还需要为单选按钮和标签元素设置tabindex="-1"，这样用户就不能通过Tab键选择它们。 - zax
0
如果您的意思是，您有一个具有值的单选按钮，并且不希望该值被删除或更改，但希望向用户显示它以通知其同意，则我认为应该可以这样做。
将单选按钮赋予一个唯一的名称属性，并将其与checked属性相结合，就像这样。
<input type="radio " name="my_radio_btn" value="its_value" checked />

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

谢谢您的回答，但是checked需要一个值——checked或空字符串（请参见规范）。而checked=""不能防止更改。 - automatix
你找到解决问题的方法了吗？ - KANAYO AUGUSTIN UG
不好意思，没有。唯一干净的解决方案是像“readonly”这样的属性。其他所有方法都是或多或少的折中方案。但似乎还没有这样的属性。 - automatix
0

这可能看起来有点不正规，但是当单击事件被触发时，您可以将单选按钮的值设置为其初始状态。

<!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，那么实现起来会更加容易。

0

如果初始时其中一个只读单选按钮被选中，您可以禁用组内的所有其他单选按钮：

<input name="my_field" value="A" type="radio" checked="checked"/>
<input name="my_field" value="B" type="radio" disabled="disabled"/>
…

那么用户无法有效地点击任何地方进行更改；但选中的输入将生成响应字段。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接