3

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

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

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

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

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

4

3 回答 3

5

尝试使用一些 CSS：

input[type="radio"].readonly {
  opacity: 0.5; /* not necessary */
  pointer-events: none;
}
于 2016-07-07T17:17:33.473 回答
0

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

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

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

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

于 2016-07-07T17:21:12.940 回答
0

这可能看起来有点 hacky，但您可以将单选按钮的值设置为其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，那么它会很容易完成。

于 2016-07-07T17:40:01.353 回答