我想显示一个单选按钮,有它的值提交,但根据情况,它是不可编辑的。Disabled不起作用,因为它不提交值(或者它是否提交?),并且它使单选按钮变灰。只读是我真正想要的,但出于某种神秘的原因,它不起作用。
我是否需要使用一些奇怪的技巧来实现只读以达到预期的效果?我应该用JavaScript写吗?
顺便提一下,有人知道为什么只读在单选按钮中不起作用,而在其他输入标签中却起作用吗?这是HTML规范中不可理解的遗漏之一吗?
我想显示一个单选按钮,有它的值提交,但根据情况,它是不可编辑的。Disabled不起作用,因为它不提交值(或者它是否提交?),并且它使单选按钮变灰。只读是我真正想要的,但出于某种神秘的原因,它不起作用。
我是否需要使用一些奇怪的技巧来实现只读以达到预期的效果?我应该用JavaScript写吗?
顺便提一下,有人知道为什么只读在单选按钮中不起作用,而在其他输入标签中却起作用吗?这是HTML规范中不可理解的遗漏之一吗?
当前回答
对于未选中的单选按钮,将它们标记为禁用。这将阻止它们响应用户输入并清除选中的单选按钮。例如:
<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
其他回答
JavaScript的方式-这对我很有用。
<script>
$(document).ready(function() {
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>
原因:
$('#YourTableId').find('*') ->返回所有标签。 $ (' # YourTableId ');(“*”)。Each (function () {$(this)。attr(“禁用”,真正的);}); 遍历在此捕获的所有对象并禁用输入标记。
分析(调试):
Form:radiobutton在内部被认为是一个“输入”标签。 像上面的函数()一样,如果你尝试打印document.write(this.tagName); 只要在标签中找到单选按钮,它就返回一个输入标签。
因此,上面的代码行可以更优化的单选按钮标签,通过输入替换*: $ (' # YourTableId ');(“输入”)。Each (function () {$(this)。attr(“禁用”,真正的);});
在JS中捕获一个“On_click()”事件并像这里一样检查它怎么样?:
http://www.dynamicdrive.com/forums/showthread.php?t=33043
只有在有其他选项时,单选按钮才需要是只读的。如果没有其他选项,则无法取消选中的单选按钮。如果你有其他选项,你可以通过禁用其他选项来阻止用户更改值:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
小提琴:http://jsfiddle.net/qqVGu/
最好的解决方案是设置已检查或未检查状态(无论是从客户端还是服务器),并且不让用户更改它之后(即使其为只读)执行以下操作:
<input type="radio" name="name" onclick="javascript: return false;" />
摘自https://stackoverflow.com/a/71086058/18183749
如果你不能使用'disabled'属性(因为它会擦除值的 input at POST),并注意到html属性'readonly'只工作 在文本区域和一些输入(文本,密码,搜索,据我所见), 最后,如果你不想重复你所有的 选择,复选框和带有隐藏输入的单选,您可能会找到 以下功能或任何他的内部逻辑,你喜欢:
addReadOnlyToFormElements = function (idElement) {
// html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
$('#' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',true);
// and, on the selected ones, mimic readonly appearance
$('#' + idElement + ' input[type="radio"]:checked').css('opacity','0.5');
}
没有什么比删除这些只读更容易的了
removeReadOnlyFromFormElements = function (idElement) {
// Remove the disabled attribut on non-selected
$('#' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',false);
// Remove readonly appearance on selected ones
$('#' + idElement + ' input[type="radio"]:checked').css('opacity','');
}