我想显示一个单选按钮,有它的值提交,但根据情况,它是不可编辑的。Disabled不起作用,因为它不提交值(或者它是否提交?),并且它使单选按钮变灰。只读是我真正想要的,但出于某种神秘的原因,它不起作用。

我是否需要使用一些奇怪的技巧来实现只读以达到预期的效果?我应该用JavaScript写吗?

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


当前回答

这是我的解决方案(覆盖)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;
        }
    }
});

其他回答

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

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

致以最亲切的问候。

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

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

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

使用jQuery使只读:

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

这种方法也适用于将选择列表设置为只读,只是需要禁用每个未选择的选项。

一个相当简单的选择是创建一个javascript函数,在表单的“onsubmit”事件上调用,以启用单选按钮返回,这样它的值就会与表单的其余部分一起发布。 这似乎不是HTML规范上的一个遗漏,而是一个设计选择(一个逻辑选择,IMHO),单选按钮不能像按钮一样是只读的,如果你不想使用它,那就禁用它。

Disabled作用于单个单选按钮(不是整个集合)。 如果您正在使用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>

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