最好的解决方案是设置已检查或未检查状态(无论是从客户端还是服务器)，并且不让用户更改它之后(即使其为只读)执行以下操作:

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

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

致以最亲切的问候。

I have a lengthy form (250+ fields) that posts to a db. It is an online employment application. When an admin goes to look at an application that has been filed, the form is populated with data from the db. Input texts and textareas are replaced with the text they submitted but the radios and checkboxes are useful to keep as form elements. Disabling them makes them harder to read. Setting the .checked property to false onclick won't work because they may have been checked by the user filling out the app. Anyhow...

onclick="return false;"

工作就像一个“禁用”无线电和复选框事实上的魅力。

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

如果你不能使用'disabled'属性(因为它会擦除值的 input at 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','');
}

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