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


213

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

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

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


5
“这是HTML规范中那些无法理解的遗漏之一吗?” 从用户的角度考虑它。为什么显示他们无法单击的按钮?
Paul D. Waite,2009年

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

7
这是规范: 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元素。” 看起来这已经在记录和规格之间落差了。
graphicdivine

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

检查我的帖子[点击这里] [1]给出一个干净简单的解决问题[1]:stackoverflow.com/a/15513256/1861389
driven4ward

Answers:


149

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

使用jQuery进行只读:

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

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


2
感谢@Megan,这是一个很好的解决方案
Michael La Voie

9
允许您使用 readonly属性,因为OP希望它起作用:$(':radio[readonly]:not(:checked)').attr('disabled', true);
wodow 2014年

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

正确运作。谢谢
哈桑·法鲁克 Hassan Farooq)

聪明!如果您已经有一组选定的输入字段,请使用.not(..):var myRadios = $('#specific-radios'); myRadios.not(':checked')。prop('disabled',true); api.jquery.com/not
JoePC '18

206

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

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

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


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

7
解决方案1!这是唯一可以正常访问的文件。而且,如果您需要编写脚本,则只需再一行即可将隐藏字段的启用状态设置为与无线电的启用状态相反。
bobince

5
我只是注意到解决方案2和3在乔纳森的答案中的位置已经改变,所以现在的评论似乎没有多大意义。
mcv

1
要注意Javascript解决方案不起作用,它只是取消选中按钮。我认为有必要onclick="return false"防止改变。
德米特里2012年

2
当我将收音机设置为“ disabled”时,我添加“ style = cursor:default”以删除“ disabled cursor”。
Joao Paulo

24

这是您可以使用的技巧。

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

4
正是我在想的那样,最好还是弄清楚它应该onClick="this.checked = <%=value%>"有所不同:)
JustLoren

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

只是警告说,这对于我们那些默认情况下未启用javascript浏览的人不起作用。
tloach

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

1
值得一提的是,您可以onclick="return false;"将组的值保持不变
Zach

12

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

onclick="return false;"

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


8

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

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

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

2

我想出了一种使用JavaScript的方式来实现复选框和单选按钮的只读状态。已针对Firefox,Opera,Safari,Google 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属性来启用/禁用单选按钮/复选框。


2

JavaScript方式-这对我有用。

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

原因:

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

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

分析(调试):

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

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

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

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


1

一个相当简单的选择是创建一个在表单的“ onsubmit”事件上调用的javascript函数,以启用单选按钮,以便将其值与表单的其余部分一起发布。
它似乎并不是对HTML规范的遗漏,但是设计选择(逻辑选择,恕我直言),单选按钮不能只读,而按钮则不能,如果您不想使用它,那么禁用它。


1

我发现使用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,它都将起作用。


1

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

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

4
checked="yes"?那是什么规格?使用checked="checked"或仅使用checked没有值的属性。相同disabled
罗宾·范·巴伦

1

尝试使用属性disabled,但是我认为您不会获得单选按钮的值。或像这样设置图像:

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

最好的祝福。


1
哦,我的html代码被剥夺了:img src =“ itIsChecked.gif” alt =“ [x]” OptionChecked
Tim

0

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.