Question

问题＆＃34;如何使单选按钮变为只读？＆＃34;已被问过n次。但解决方案始终是disabled="disabled"。

（也可能有复杂的JavaScript解决方案，可以处理click或change事件并阻止价值的变化，但所有这些通常都会带来或多或少的气味肮脏的黑客。）

disabled="disabled"的问题/副作用是，＃＆＃34;删除＆＃34;数据集中的字段然后不会发送到服务器。

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

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

Answer 1

尝试使用一些CSS：

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

Answer 2

如果这是你的意思。您有radio button具有值并且您不希望删除或更改该值但您希望将其显示给用户可能会通知他的同意。然后我认为这应该有效。

仅提供分配给它的radio button name属性以及checked这样的属性。

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

这样，用户无法取消选中

Answer 3

这可能看起来有点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那么它将很容易实现。

如何使radion按钮成为只读但未禁用？

3 个答案: