Question

我想显示一个单选按钮，提交其值，但根据具体情况，让它不可编辑。禁用不起作用，因为它没有提交值（或者是吗？），它会使单选按钮变灰。只读是我正在寻找的东西，但由于一些神秘的原因，它不起作用。

是否有一些奇怪的技巧需要拉动以使只读按预期工作？我应该用JavaScript代替吗？

顺便提一下，有没有人知道为什么只读在单选按钮中不起作用，而它在其他输入标签中有效？这是HTML规范中难以理解的遗漏之一吗？

Answer 1

如果有其他选项，单选按钮只需要是只读的。如果您没有任何其他选项，则无法取消选中已选中的单选按钮。如果您有其他选项，则可以通过禁用其他选项来阻止用户更改值：

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

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

Answer 2

我只通过禁用未检查的单选按钮，在单选按钮上只读了一下。它使用户不会选择不同的值，并且选中的值将始终在提交时发布。

使用jQuery进行只读：

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

除了您需要禁用每个未选择的选项外，此方法还可用于只读选择列表。

Answer 3

这是你可以使用的技巧。

<input type="radio" name="name" onclick="this.checked = false;" />

Answer 4

我有一个冗长的表单（250多个字段）发布到数据库。这是一个在线就业申请。当管理员查看已归档的应用程序时，表单将填充来自db的数据。输入文本和textareas将替换为他们提交的文本，但无线电和复选框对于保留为表单元素非常有用。禁用它们会使它们更难阅读。将.checked属性设置为false onclick将不起作用，因为填写应用程序的用户可能已经检查过它们。总之...

onclick="return false;"

就像“禁用”无线电和其他复选框的魅力一样。

Answer 5

最好的解决方案是设置已检查或未检查的状态（来自客户端或服务器），并且不让用户在病房（即使其只读）之后更改它，执行以下操作：

<input type="radio" name="name" onclick="javascript: return false;" />

Answer 6

我想出了一个javascript密集的方法来实现复选框和单选按钮的只读状态。它针对当前版本的Firefox，Opera，Safari，谷歌Chrome以及当前和以前版本的IE（低至IE7）进行了测试。

为什么不简单地使用您要求的残疾人财产？打印页面时，禁用的输入元素以灰色显示。实现此功能的客户希望所有元素都采用相同的颜色。

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

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

<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>

<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>

这部分的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属性来启用/禁用单选按钮/复选框。

Answer 7

JavaScript方式 - 这对我有用。

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

原因：

$('#YourTableId').find('*') - ＆gt;这将返回所有标签。
$('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); 迭代在此捕获的所有对象并禁用输入标记。

分析（调试）：

form:radiobutton在内部被视为＆＃34;输入＆＃34;标签
与上述函数（）类似，如果您尝试打印document.write(this.tagName);
无论何时，在标签中找到单选按钮，它都会返回一个输入标签。

因此，通过将*替换为输入，上面的代码行可以针对单选按钮标记进行更优化： $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

Answer 8

尝试属性disabled，但我认为你不会得到单选按钮的值。或者设置图像，如：

<img src="itischecked.gif" alt="[x]" />radio button option

最诚挚的问候。

Answer 9

一个相当简单的选择是创建一个在窗体的“onsubmit”事件上调用的javascript函数，以启用radiobutton，使其值与表单的其余部分一起发布。
它似乎不是HTML规范的遗漏，而是一个设计选择（一个逻辑的，恕我直言），一个无线电按钮不能只读按钮，如果你不想使用它，那么禁用它。

Answer 10

我发现使用onclick='this.checked = false;'在某种程度上有效。单击的单选按钮将不会被选中。但是，如果有一个单选按钮已经（例如，默认值），则该单选按钮将被取消选中。

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

对于这种情况，单独保留默认值并禁用其他单选按钮会保留已选择的单选按钮并阻止其被取消选择。

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

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

Answer 11

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

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>

Answer 12

我使用的是JS plugin样式的复选框/无线电输入元素，并使用以下jQuery建立了一个“只读状态”，其中基础值仍被发布，但是用户无法访问该输入元素，我相信这是我们使用只读输入属性的预期原因...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}

Answer 13

如何在JS中捕获“On_click（）”事件并在此处进行检查？：

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

为什么单选按钮不能“只读”？

13 个答案: