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

Why can't radio buttons be "readonly"?

提问by mcv

I would like to show a radio button, have its value submitted, but depending on the circumstances, have it not editable. Disabled doesn't work, because it doesn't submit the value (or does it?), and it grays out the radio button. Read-only is really what I'm looking for, but for some mysterious reason it doesn't work.

我想显示一个单选按钮，提交其值，但根据情况，它不可编辑。Disabled 不起作用，因为它不提交值（或者提交？），并且它使单选按钮变灰。只读确实是我正在寻找的，但由于某种神秘的原因它不起作用。

Is there some weird trick I need to pull to get read-only to work as expected? Should I just do it in JavaScript instead?

是否有一些奇怪的技巧我需要拉才能按预期工作？我应该用 JavaScript 来代替吗？

Incidentally, does anyone know why read-only doesn't work in radio buttons, while it does work in other input tags? Is this one of those incomprehensible omissions in the HTML specs?

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

采纳答案by Megan

I've faked readonly on a radio button by disabling only the un-checked radio buttons. It keeps the user from selecting a different value, and the checked value will always post on submit.

我通过仅禁用未选中的单选按钮在单选按钮上伪造了只读。它阻止用户选择不同的值，并且选中的值将始终在提交时发布。

Using jQuery to make readonly:

使用 jQuery 使只读：

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

This approach also worked for making a select list readonly, except that you'll need to disable each un-selected option.

这种方法也适用于使选择列表只读，除了您需要禁用每个未选择的选项。

回答by Sampson

Radio buttons would only need to be read-only if there are other options. If you don't have any other options, a checked radio button cannot be unchecked. If you have other options, you can prevent the user from changing the value merely by disabling the other options:

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

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

Fiddle: http://jsfiddle.net/qqVGu/

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

回答by Sarfraz

This is the trick you can go with.

这是你可以使用的技巧。

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

回答by humbolight

I have a lengthy form (250+ fields) that posts to a db. It is an online employment application. When an admin goes to look at an application that has been filed, the form is populated with data from the db. Input texts and textareas are replaced with the text they submitted but the radios and checkboxes are useful to keep as form elements. Disabling them makes them harder to read. Setting the .checked property to false onclick won't work because they may have been checked by the user filling out the app. Anyhow...

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

onclick="return false;"

works like a charm for 'disabling' radios and checkboxes ipso facto.

就像“禁用”收音机和复选框的魅力一样。

回答by Vipresh

The best solution is to set the checked or unchecked state (either from client or server) and to not let the user change it after wards (i.e make it readonly) do the following:

最好的解决方案是设置选中或未选中状态（从客户端或服务器），并且不允许用户在 wards 之后更改它（即使其只读）执行以下操作：

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

回答by Tom

I've come up with a javascript-heavy way to achieve a readonly state for check boxes and radio buttons. It is tested against current versions of Firefox, Opera, Safari, Google Chrome, as well as current and previous versions of IE (down to IE7).

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

Why not simply use the disabled property you ask? When printing the page, disabled input elements come out in a gray color. The customer for which this was implemented wanted all elements to come out the same color.

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

I'm not sure if I'm allowed to post the source code here, as I developed this while working for a company, but I can surely share the concepts.

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

With onmousedown events, you can read the selection state before the click action changes it. So you store this information and then restore these states with an onclick event.

使用 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>

The javascript portion of this would then work like this (again only the concepts):

然后，它的 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;
}

You can now enable/disable the radio buttons/checkboxes by changing the onclick and onmousedown properties of the input elements.

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

回答by user3702798

JavaScript way - this worked for me.

JavaScript 方式 - 这对我有用。

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

Reason:

原因：

1. $('#YourTableId').find('*')-> this returns all the tags.

2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });iterates over all objects captured in this and disable input tags.

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

2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });迭代 this 中捕获的所有对象并禁用输入标签。

Analysis (Debugging):

分析（调试）：

1. form:radiobuttonis internally considered as an "input" tag.

2. Like in the above function(), if you try printing document.write(this.tagName);

3. Wherever, in tags it finds radio buttons, it returns an input tag.

1. form:radiobutton在内部被视为“输入”标签。

2. 就像上面的函数（）一样，如果你尝试打印 document.write(this.tagName);

3. 无论在标签中的何处找到单选按钮，它都会返回一个输入标签。

So, above code line can be more optimized for radio button tags, by replacing * with input: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

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

回答by dpolican

For the non-selected radio buttons, flag them as disabled. This prevents them from responding to user input and clearing out the checked radio button. For example:

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

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

回答by wintermute

A fairly simple option would be to create a javascript function called on the form's "onsubmit" event to enable the radiobutton back so that it's value is posted with the rest of the form.
It does not seem to be an omission on HTML specs, but a design choice (a logical one, IMHO), a radiobutton can't be readonly as a button can't be, if you don't want to use it, then disable it.

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

回答by JW8

I found that use onclick='this.checked = false;'worked to a certain extent. A radio button that was clicked would not be selected. However, if there was a radio button that was alreadyselected (e.g., a default value), that radio button would become unselected.

我发现使用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>

For this scenario, leaving the default value alone and disabling the other radio button(s) preserves the already selected radio button and prevents it from being unselected.

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

<!-- 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>

This solution is not the most elegant way of preventing the default value from being changed, but it will work whether or not javascript is enabled.

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