我想显示一个单选按钮，提交其值，但根据情况，使其不可编辑。 禁用不起作用，因为它不提交值(或者是？)，并且它使单选按钮变灰。 只读确实是我想要的，但是由于某些神秘的原因，它不起作用。

是否需要一些怪异的技巧才能使只读功能按预期工作？ 我应该只用JavaScript代替吗？

顺便说一句，有人知道为什么只读在单选按钮中不起作用，而在其他输入标签中却起作用吗？ 这是HTML规范中那些无法理解的遗漏之一吗？

"这是HTML规范中那些无法理解的遗漏之一吗？"从用户的角度考虑。为什么显示他们无法点击的按钮？

为什么显示他们无法单击的按钮？因为我希望他们知道按钮在那里，但是我不希望他们现在能够单击它。但是也许以后。毕竟，它是一种动态形式。为什么单选按钮与任何其他输入字段都不同？

这是规范：w3.org/TR/html401/interact/forms.html#h-17.12.2"以下元素支持readonly属性：INPUT和TEXTAREA。"这显然是错误的。不过，回到这里，我们可以看到更准确的摘要：w3.org/TR/WD-forms-970402#readonly" READONLY适用于TEXT或PASSWORD类型的INPUT元素以及TEXTAREA元素。"看起来这已经在记录和规格之间落差了。

更加好奇。根据这个古老的文档，"例如，在复选框中，您可以选中或选中它们(从而设置CHECKED状态)，但是您不更改字段的值。" (htmlcodetutorial.com/forms/_INPUT_DISABLED.html)这是真的吗？即使用户显然可以更改值，在复选框/无线电上设置READONLY也会锁定该值吗？

检查我的帖子[这里] [1]为问题[1]提供了一个干净简单的解决方案：stackoverflow.com/a/15513256/1861389

相关的stackoverflow.com/questions/155291/

仅当存在其他选项时，单选按钮才需要是只读的。如果没有其他选项，则不能取消选中选中的单选按钮。如果还有其他选项，则可以仅通过禁用其他选项来阻止用户更改值：

小提琴：http://jsfiddle.net/qqVGu/

您第一个解决方案的问题是，如果我想通过javascript启用单选按钮，则会突然出现两个具有相同名称的字段，因此我必须清理其中一个。或将隐藏的字段实际使用，并使单选按钮仅设置隐藏字段的值。以这种方式，它比像单选按钮那样的ID更加麻烦。您的第二个解决方案，尽管我毫不怀疑它是否有效，听起来像是一个非常丑陋的hack。因此，我认为javascript解决方案是唯一符合我的标准的解决方案。那样吧。

解决方案2确实是一个可怜的黑客，可能无法在使用较少的浏览器(例如"链接")上使用。它也不能在所有浏览器上工作，因为您可以对其进行制表。这只会使用户感到困惑。

解决方案1！它是唯一正确访问的。而且，如果您需要编写脚本，则只需一行以上的代码即可将隐藏字段的启用状态设置为与收音机的启用状态相反。

我只是注意到解决方案2和3在乔纳森斯答案中的位置已转换，因此现在的注释似乎没有多大意义。

要注意Javascript解决方案不起作用，它只是取消选中按钮。我想它必须是οnclick="return false"以防止更改。

οnclick="return false"可在FF15和Chrome22中使用，但也会触发onchange事件。在IE9中，现有点实际上未设置。解决方案1是在所有3个浏览器中都对我有用的唯一解决方案。如果需要JS操作，则应为单选按钮提供前缀/后缀，以防止相同的元素ID冲突，但是FORM提交不需要它，因为具有相同名称的最后一个元素将覆盖先前的值，但是禁用的元素无论如何都不会提交。

@Megan在下面发布了一个更优雅的解决方案。当然那只是我的意见。

当我将收音机设置为" disabled"时，我添加" style = cursor：default"以删除" disabled cursor"。

通过仅禁用未选中的单选按钮，我伪造了单选按钮上的只读属性。它使用户无法选择其他值，并且选中的值将始终在提交时过帐。

使用jQuery进行只读：

$(':radio:not(:checked)').attr('disabled', true);

除了需要禁用每个未选择的选项之外，该方法还可以使选择列表变为只读。

谢谢@Megan，这是一个很好的解决方案

对此的一种变体，以允许您使用readonly属性，如OP期望的那样：$(:radio[readonly]:not(:checked)).attr(disabled, true);

在下面的解决方案中，此解决方案提供了最干净的代码，并且与Jquery验证程序一起使用很好，因为我不需要启用/禁用字段，也不需要处理取消绑定的点击事件并在提交表单时重新绑定它们。

正确运作。谢谢

聪明！如果您已经有一组选定的输入字段，请使用.not(..)：var myRadios = $(＃specific-radios); myRadios.not(：checked).prop(disabled，true); api.jquery.com/not

巧妙的方法

也可以在角度中与elementRef一起使用

这是您可以使用的技巧。

正是我在想的那样，最好还是弄清楚它应该是某种形式的onClick="this.checked = " ：)

很高兴知道。被选中的值可以为true或false。

只是警告说，这对于我们默认情况下未启用javascript浏览功能的用户无效。

对我而言，这不是问题。我们已经使用了大量的jQuery和Ajax。

值得一提的是，您只需执行οnclick="return false;"即可保持组的值相同

这不会阻止用户使用键盘更改值(聚焦元素并使用箭头键切换值)

我有一个冗长的表单(250多个字段)，该表单发布到数据库。这是一个在线就业申请。管理员查看已提交的应用程序时，将使用数据库中的数据填充表单。输入文本和文本区域将替换为它们提交的文本，但单选框和复选框对于保留为表单元素很有用。禁用它们会使它们更难阅读。将.checked属性设置为false onclick无效，因为用户可能已经填写了应用程序进行了检查。无论如何...

οnclick="return false;"

实际上就像"禁用"收音机和复选框的魅力一样。

最好的解决方案是设置选中状态或未选中状态(从客户端还是服务器)，并且不要让用户在病房后更改状态(即使其变为只读状态)，请执行以下操作：

没有！在这种情况下，用户可以在浏览器中编辑html，将需要的选项标记为已选择并发布表单。

JavaScript方式-这对我有用。

$(document).ready(function() {

$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });

});

原因：

$('#YourTableId').find('*')->这将返回所有标签。

$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });

遍历此对象中捕获的所有对象并禁用输入标签。

分析(调试)：

form:radiobutton在内部被视为"输入"标签。

就像上面的function()一样，如果您尝试打印document.write(this.tagName);

无论在何处，只要在标签中找到单选按钮，它都会返回输入标签。

因此，可以通过将*替换为输入，将上述代码行针对单选按钮标签进行更优化：

$('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

我想出了一种使用JavaScript的方式来实现复选框和单选按钮的只读状态。已针对Firefox，Opera，Safari，Google Chrome的当前版本以及IE的当前和早期版本(低至IE7)进行了测试。

为什么不简单使用您要求的禁用属性？打印页面时，禁用的输入元素显示为灰色。实施此功能的客户希望所有元素都呈现相同的颜色。

我不确定是否可以在此处发布源代码，因为我是在为公司工作时开发的，但是我可以肯定地分享一些概念。

使用onmousedown事件，您可以在单击操作对其进行更改之前读取选择状态。因此，您存储此信息，然后使用onclick事件还原这些状态。

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

然后，其中的javascript部分将像这样(仅在概念上)工作：

var selectionStore = new Object();  // keep the currently selected items' ids in a store

function storeSelectedRadiosForThisGroup(elementName) {

// get all the elements for this group

var radioOrSelectGroup = document.getElementsByName(elementName);

// iterate over the group to find the selected values and store the selected ids in the selectionStore

// ((radioOrSelectGroup[i].checked == true) tells you that)

// remember checkbox groups can have multiple checked items, so you you might need an array for the ids

...

}

function setSelectedStateForEachElementOfThisGroup(elementName) {

// iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore

...

// make sure you return false here

return false;

}

现在，您可以通过更改输入元素的onclick和onmousedown属性来启用/禁用单选按钮/复选框。

对于未选中的单选按钮，将其标记为禁用。这样可以防止他们响应用户输入并清除选中的单选按钮。例如：

checked="yes"？那是什么规格？使用checked="checked"或仅使用属性checked不带值。与disabled相同。

我发现use οnclick='this.checked = false;'在一定程度上有效。将不会选择单击的单选按钮。但是，如果已经选择了一个单选按钮(例如，默认值)，则该单选按钮将变为未选择状态。

N

Y

对于这种情况，不使用默认值并禁用其他单选按钮将保留已选择的单选按钮，并防止未选择它。

N

Y

此解决方案不是防止更改默认值的最优雅的方法，但是无论是否启用javascript，它都将起作用。

一个相当简单的选择是创建一个在表单的" onsubmit"事件上调用的javascript函数，以使单选按钮返回，以便将其值与表单的其余部分一起发布。

它似乎并不是对HTML规范的遗漏，但是设计选择(逻辑选择，恕我直言)，单选按钮不能只读，而按钮则不能，如果您不想使用它，那么禁用它。

尝试使用属性disabled，但我认为您不会获得单选按钮的值。

或像这样设置图像：

radio button option

最好的祝福。

哦，我的html代码被剥夺了：img src =" itIsChecked.gif" alt =" [x]" OptionChecked

我正在使用样式为复选框/无线电输入元素样式的JS插件，并使用以下jQuery建立了一个"只读状态"，在该状态下基础值仍处于发布状态，但用户无法访问输入元素，这是我预期的原因我们将使用只读输入属性...

if ($(node).prop('readonly')) {

$(node).parent('div').addClass('disabled'); // just styling, appears greyed out

$(node).on('click', function (e) {

e.preventDefault();

});

}

如何在JS中捕获" On_click()"事件并像此处进行检查那样呢？

http://www.dynamicdrive.com/forums/showthread.php?t=33043