我想显示一个单选按钮，有它的值提交，但根据情况，它是不可编辑的。Disabled不起作用，因为它不提交值(或者它是否提交?)，并且它使单选按钮变灰。只读是我真正想要的，但出于某种神秘的原因，它不起作用。
我是否需要使用一些奇怪的技巧来实现只读以达到预期的效果?我应该用JavaScript写吗?
顺便提一下，有人知道为什么只读在单选按钮中不起作用，而在其他输入标签中却起作用吗?这是HTML规范中不可理解的遗漏之一吗?
当前回答
这是你可以使用的技巧。
<input type="radio" name="name" onclick="this.checked = 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','');
}
只有在有其他选项时，单选按钮才需要是只读的。如果没有其他选项，则无法取消选中的单选按钮。如果你有其他选项，你可以通过禁用其他选项来阻止用户更改值:
<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>
小提琴:http://jsfiddle.net/qqVGu/
我通过只禁用未选中的单选按钮来伪造单选按钮的只读。它可以防止用户选择不同的值，并且选中的值将始终在提交时发布。
使用jQuery使只读:
$(':radio:not(:checked)').attr('disabled', true);
这种方法也适用于将选择列表设置为只读，只是需要禁用每个未选择的选项。
Disabled作用于单个单选按钮(不是整个集合)。 如果您正在使用PHP，并且在浏览器中加载页面之前，服务器上已经知道您的情况，那么您可以使用这个非常简单的解决方案。
<php $chcky= (condition) ? 'checked' : 'disabled';?>
<php $chckn= (condition) ? 'checked' : 'disabled';?>
<input type="radio" name="var" value="Yes" <?php echo $chcky?>></input>
<input type="radio" name="var" value="No" <?php echo $chckn?>></input>
我在响应表单提交的页面上使用它。
我正在使用一个JS插件，样式复选框/单选输入元素，并使用以下jQuery来建立一个“只读状态”，其中底层值仍然发布，但输入元素似乎无法访问用户，这是我相信我们将使用只读输入属性的预期原因…
if ($(node).prop('readonly')) {
$(node).parent('div').addClass('disabled'); // just styling, appears greyed out
$(node).on('click', function (e) {
e.preventDefault();
});
}
