为什么单选按钮不能“只读”?

只有在有其他选项时，单选按钮才需要是只读的。如果没有其他选项，则无法取消选中的单选按钮。如果你有其他选项，你可以通过禁用其他选项来阻止用户更改值:

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

小提琴:http://jsfiddle.net/qqVGu/

这是你可以使用的技巧。

<input type="radio" name="name" onclick="this.checked = false;" />

<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);

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

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

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

我想出了一个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属性来启用/禁用单选按钮/复选框。

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

我有一个很长的表单(250多个字段)张贴到一个db。这是一个在线就业申请。当管理员查看已提交的应用程序时，表单将使用来自db的数据填充。输入文本和文本区域被替换为他们提交的文本，但是复选框和单选框作为表单元素是有用的。禁用它们会使它们更难阅读。将.checked属性设置为false onclick将不起作用，因为它们可能已经被用户填写应用程序检查过了。

onclick="return false;"

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

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

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

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

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

原因:

1. $('#YourTableId').find('*') ->返回所有标签。

<李> < p > $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });

分析(调试):

1. form:radiobutton在内部被认为是一个“input”标签。

2. 就像在上面的函数()中，如果你尝试打印document.write(this.tagName);

3. 只要在标签中找到单选按钮，它就返回一个输入标签。

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

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

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

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>

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

从https://stackoverflow.com/a/71086058/18183749提取

如果你不能使用'disabled'属性(因为它会擦除值的 input at POST)，并注意到html属性'readonly'只工作 在文本区域和一些输入(文本，密码，搜索，据我所见)， 最后，如果你不想重复你所有的 select，复选框和带有隐藏输入的广播，您可能会发现 下面的函数或任何他的内部逻辑你喜欢:

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