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

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

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>

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

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

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

致以最亲切的问候。

我发现使用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，它都是有效的。

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

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>

摘自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','');
}