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

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

JavaScript的方式-这对我很有用。

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

原因:

$('#YourTableId').find('*') ->返回所有标签。 $ (' # YourTableId ');(“*”)。Each (function () {$(this)。attr(“禁用”,真正的);})； 遍历在此捕获的所有对象并禁用输入标记。

分析(调试):

Form:radiobutton在内部被认为是一个“输入”标签。 像上面的函数()一样，如果你尝试打印document.write(this.tagName); 只要在标签中找到单选按钮，它就返回一个输入标签。

因此，上面的代码行可以更优化的单选按钮标签，通过输入替换*: $ (' # YourTableId ');(“输入”)。Each (function () {$(this)。attr(“禁用”,真正的);})；

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

我想出了一个javascript的方法来实现复选框和单选按钮的只读状态。它针对当前版本的Firefox, Opera, Safari，谷歌Chrome，以及当前和以前版本的IE(直到IE7)进行了测试。

为什么不简单地使用disabled属性呢?打印页面时，禁用的输入元素显示为灰色。实现此功能的客户希望所有元素都是相同的颜色。

我不确定我是否可以在这里发布源代码，因为我是在为一家公司工作时开发的，但我肯定可以分享这些概念。

使用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属性来启用/禁用单选按钮/复选框。

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

使用jQuery使只读:

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

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

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