logo标签列表

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

htmlradio-buttonreadonly
264

我希望展示一个单选按钮，并将其值提交，但根据情况，它不可编辑。禁用不起作用，因为它不会提交值（或者会吗？），且灰显了单选按钮。实际上，只读是我正在寻找的，但由于某种神秘原因，它不起作用。

有没有一些奇怪的技巧可以使只读功能按预期工作？我是否应该在JavaScript中完成它？

顺便问一下，有人知道为什么只读无法在单选钮中工作，而在其他输入标记中可以工作吗？这是HTML规范中那些难以理解的遗漏之一吗？

7
这是HTML规范中那些令人费解的遗漏之一吗？从用户的角度考虑，为什么要显示他们无法点击的按钮呢？ - Paul D. Waite
92
为什么要显示一个不能点击的按钮？因为我希望他们知道该按钮的存在，但现在我不想让他们能够单击它。但也许以后可以。毕竟，这是一个动态表单。为什么单选按钮会与其他输入字段不同呢？ - mcv
8
这是规范说明：http://www.w3.org/TR/html401/interact/forms.html#h-17.12.2"以下元素支持readonly属性：INPUT和TEXTAREA。"这显然是错误的。不过，在这里可以看到更准确的总结：http://www.w3.org/TR/WD-forms-970402#readonly"READONLY适用于类型为TEXT或PASSWORD的INPUT元素和TEXTAREA元素。"看起来这在规范之间出现了漏洞。 - graphicdivine
更加好奇。根据这份古老的文件，“例如在复选框中，您可以将其选中或取消选中（从而设置CHECKED状态），但不会更改字段的值。”（http://www.htmlcodetutorial.com/forms/_INPUT_DISABLED.html）这是真的吗？即使用户显然可以更改它，将READONLY设置为复选框/单选按钮是否会锁定该值？ - graphicdivine
请查看我的帖子这里，提供了一个干净简单的解决方案。 - driven4ward
可以将 HTML 复选框设置为只读吗？ - Adriano
17个回答
1
一个相对简单的选择是创建一个名为“onsubmit”的javascript函数，以启用单选按钮，以便其值与表单的其余部分一起发布。
这似乎不是HTML规范的遗漏，而是一种设计选择（在我看来是合理的），如果您不想使用它，则无法将单选按钮设置为只读，就像按钮一样。那么请将其禁用。
1

使单选按钮只读相对容易。使用 CSS 禁用鼠标选择单选按钮或其标签的功能，并在这些元素上设置 tabindex = -1，以防止用户使用 Tab 键和空格键组合选择元素。

input[type="radio"].readonly {
    pointer-events: none;
}

label.readonly {
    pointer-events: none;
}
<input tabindex="-1" class="readonly" type="radio" name="rbgOptions" id="cbOpt1" value="Option1">
<label tabindex="-1" class="readonly" for="cbOpt1">Option 1</label>
<input tabindex="-1" class="readonly" type="radio" name="rbgOptions" id="cbOpt2" value="Option2">
<label tabindex="-1" class="readonly" for="cbIOP">Option 2</label>

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>

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

0

从https://dev59.com/fHA75IYBdhLWcg3wB0VP#71086058中提取

如果您无法使用“disabled”属性（因为它会在POST时擦除值的输入），并且注意到HTML属性“readonly”仅适用于文本区域和某些输入（文本、密码、搜索，就我所见），最后，如果您不想麻烦地复制所有选择、复选框和单选按钮与隐藏输入，您可能会发现以下函数或其任何内部逻辑符合您的口味：

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','');
}
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://dev59.com/snI-5IYBdhLWcg3wPFx2
     *
     * @param {boolean} newValue
     *
     *  - use disabled on the field
     */
    updateReadOnly(value) {
        this.callParent(arguments);

        if (!this.getDisabled()) {
            this.inputElement.dom.disabled = value;
        }
    }
});
0

我正在使用一个JS 插件 来为复选框/单选按钮输入元素添加样式，并使用以下jQuery来建立“只读状态”，其中底层值仍然会被发布，但是输入元素对用户不可访问，这是我相信我们会使用只读输入属性的预期原因...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}
-2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接