"如何使单选按钮只读?"这个问题已经被问了n
次了。但解决方案总是disabled="disabled"
.
(也可能有复杂的JavaScript解决方案,它们与click
或change
事件一起工作并防止值的更改,但所有这些通常都有或多或少的肮脏黑客的味道。
disabled="disabled"
的问题/副作用是,它从数据集中"删除"字段,然后它不会发送到服务器。
我想要的是使单选按钮只读/不可更改 - 但同时让它们在表单提交时发送到服务器。 disabled
不符合此要求,readonly
似乎不适用于单选按钮。
将单选按钮设为只读而不将其从表单数据集中删除的正确 HTML 属性是什么?
尝试使用一些 CSS:
input[type="radio"].readonly {
opacity: 0.5; /* not necessary */
pointer-events: none;
}
如果这是你的意思。您有一个具有值的radio button
,并且您不希望删除或更改该值,但您希望将其显示给用户,以通知其同意。那么我认为这应该有效。
为radio button
单独分配给它的name
属性以及像这样的checked
属性。
<input type="radio " name="my_radio_btn" value="its_value" checked />
这样,用户就无法取消选中它
这可能看起来有点笨拙,但您可以将单选按钮的值设置为在为其触发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,那么这将很容易实现。
如果最初选中其中一个只读单选按钮,则可以禁用组中的所有其他单选按钮:
<input name="my_field" value="A" type="radio" checked="checked"/>
<input name="my_field" value="B" type="radio" disabled="disabled"/>
…
然后,用户无法有效地单击任何位置进行更改;但选中的输入将生成响应字段。