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

Posted 2021-04-28

我想显示一个单选按钮，有其价值提交，但根据具体情况，有它不可编辑。残疾人是不行的，因为它没有提交值（或不是吗？），它呈灰色的单选按钮。只读真的是我要找的，但对于某些神秘的原因这是行不通的。

有一些奇怪的把戏我需要拉来获得只读达到预期效果？如果我只是做在javascript中呢？

顺便说一句，没有人知道为什么只读不单选按钮的工作，而它在其他输入标签的工作？在html规范这一块那些难以理解的疏漏？

答案

我只禁用未核对的单选按钮只读伪造单选按钮。它使用户从选择不同的值，并且检查值将始终张贴提交。

使用jQuery做只读：

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

这种方法也工作了制作选择列表只读，但你需要禁用的每个未选中的选项。

另一答案

对于非选择的单选按钮，它们标记为禁用。这将防止其响应于用户输入和清理出所检查的单选按钮。例如：

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

另一答案

尝试属性disabled，但我认为你不会得到单选按钮的值。或一组图片来代替，如：

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

最好的祝福。

另一答案

我使用JS plugin该样式复选框/无线电输入元件和使用了以下的jQuery建立“只读状态”其中底层值仍然贴但输入元素出现不可访问的用户，这是我相信预期原因我们会用一个只读输入属性...

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

另一答案

怎么样捕捉“On_click（）”事件中的JS和检查它喜欢这里？：

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

另一答案

单选按钮将只需要只读的，如果有其他的选择。如果你没有任何其他选择，选中的单选按钮，不能听之任之。如果您还有其他的选择，你可以防止更改值的用户仅仅通过禁用其他选项：

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

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

另一答案

这是你可以去的伎俩。

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

另一答案

我有一个长的表单（250个+字段）职位，以分贝。它是一个在线工作申请。当管理员去看看那个已经提出申请，形式填充了DB数据。输入文本和文本域被替换为他们提交的文本，但收音机和复选框都保持表单元素有用。禁用它们，使它们难以阅读。在.checked属性设置为false的onclick，因为他们可能已经由用户填写的检查程序将无法正常工作。无论如何...

onclick="return false;"

工作像“禁止”收音机和复选框在事实上魅力。

另一答案

最好的解决办法是设置选中或取消选中状态（无论是从客户端或服务器），并没有让用户病房后改变（即让它只读）做到以下几点：

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

另一答案

我想出了一个JavaScript重的方式来实现复选框和单选按钮的只读状态。它是针对Firefox，歌剧，Safari浏览器，谷歌浏览器的最新版本，以及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事件输入元素的属性禁用无线电按钮/复选框。

另一答案

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. 如上面的（）的函数，如果你尝试打印document.write(this.tagName);
3. 无论走到哪里，在标签中找到单选按钮，它会返回一个输入标签。

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

另一答案

一个相当简单的选择是创建号召形式的“的onsubmit”事件使单选按钮回来，它的价值是贴有该表格的其余部分的JavaScript函数。 它似乎并没有放在HTML规范的疏漏，而是一个设计选择（逻辑一，恕我直言），一个单选按钮不能只读作为一个按钮是不可能的，如果你不想使用它，那么禁用它。

另一答案

我发现，使用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是否被启用。