243

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

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

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

4

16 回答 16

229

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

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

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

于 2009-12-23T14:12:32.147 回答
174

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

使用 jQuery 进行只读：

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

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

于 2011-03-25T20:40:52.160 回答
25

这是您可以使用的技巧。

<input type="radio" name="name" onclick="this.checked = false;" />
于 2009-12-23T14:13:26.777 回答
16

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

onclick="return false;"

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

于 2012-10-16T18:27:23.800 回答
9

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

<input type="radio" name="name" onclick="javascript: return false;" />
于 2011-06-10T14:18:03.767 回答
2

我想出了一个 javascript-heavy 方法来实现复选框和单选按钮的只读状态。它针对当前版本的 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 属性来启用/禁用单选按钮/复选框。

于 2011-09-15T09:19:31.520 回答
2

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

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
于 2013-05-15T23:26:35.727 回答
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. 就像上面的函数（）一样，如果你尝试打印document.write(this.tagName);

  3. 只要在标签中找到单选按钮，它就会返回一个输入标签。

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

于 2014-06-03T11:26:24.137 回答
1

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

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

最好的祝福。

于 2009-12-23T14:15:48.440 回答
1

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

于 2009-12-23T14:26:38.990 回答
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，它都将起作用。

于 2011-11-02T23:16:39.440 回答
0

我正在使用一个样式化复选框/无线电输入元素的 JS插件，并使用以下 jQuery 建立一个“只读状态”，其中仍然发布基础值但输入元素对用户来说似乎无法访问，我相信这是预期的原因我们将使用只读输入属性...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}
于 2018-12-20T12:26:35.660 回答
0

这是我针对 Sencha ExtJS 7.2+ 的解决方案（覆盖）（单个覆盖中的复选框和单选）


Ext.define('MyApp.override.field.Checkbox', {
    override: 'Ext.field.Checkbox',

    /**
     * OVERRIDE: to allow updateReadOnly to work propperly
     * @param {boolean} newValue
     *
     * To ensure the disabled state stays active if the field is still readOnly
     * we re - set the disabled state
     */
    updateDisabled(newValue) {
        this.callParent(arguments);

        if (!newValue && this.getReadOnly()) {
            this.inputElement.dom.disabled = true;
        }
    },

    /**
     * OVERRIDE: readonly for radiogroups and checkboxgroup do not work as other fields
     *     https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly
     *
     * @param {boolean} newValue
     *
     *  - use disabled on the field
     */
    updateReadOnly(value) {
        this.callParent(arguments);

        if (!this.getDisabled()) {
            this.inputElement.dom.disabled = value;
        }
    }
});
于 2021-09-06T11:39:54.187 回答
0

禁用适用于单个单选按钮（不是整个集合）。如果您使用的是 PHP，并且在浏览器中加载页面之前您的情况在服务器上是已知的，那么您可以使用这个非常简单的解决方案。

<php $chcky= (condition) ? 'checked' : 'disabled';?>
<php $chckn= (condition) ? 'checked' : 'disabled';?>
<input type="radio" name="var" value="Yes" <?php echo $chcky?>></input>
<input type="radio" name="var" value="No" <?php echo $chckn?>></input>

我在响应表单提交的页面上使用它。

于 2022-02-02T15:24:14.987 回答
0

摘自https://stackoverflow.com/a/71086058/18183749

如果您不能使用“禁用”属性（因为它会删除 POST 时的值输入），并注意到 html 属性“只读”仅适用于 textarea 和一些输入（文本、密码、搜索，据我所知） )，最后，如果您不想费心复制所有带有隐藏输入的选择、复选框和收音机，您可能会发现以下函数或他喜欢的任何内部逻辑：

addReadOnlyToFormElements = function (idElement) {
    // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
    $('#' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',true); 

    // and, on the selected ones, mimic readonly appearance
    $('#' + idElement + ' input[type="radio"]:checked').css('opacity','0.5');
}

没有什么比删除这些只读的更容易的了

removeReadOnlyFromFormElements = function (idElement) {
    // Remove the disabled attribut on non-selected
    $('#' + idElement + ' input[type="radio"]:not(:checked)').prop('disabled',false); 
 
    // Remove readonly appearance on selected ones
    $('#' + idElement + ' input[type="radio"]:checked').css('opacity','');
}
于 2022-02-11T23:23:56.067 回答
-2

在 JS 中捕获“On_click()”事件并像这里一样检查它怎么样？：

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

于 2009-12-23T14:16:20.857 回答