为什么无法将单选按钮设置为"只读"？

在HTML中，单选按钮（radio buttons）是一种用于在一组选项中选择一个选项的控件。通常情况下，我们可以通过设置"disabled"属性来禁用单选按钮，从而使其处于只读状态。然而，有时候我们可能希望保持单选按钮可用，但阻止用户更改其选中状态。然而，在HTML中并没有提供直接的"只读"属性或方法来实现这一点。

解决这个问题的方法是使用JavaScript来实现。可以通过在单选按钮的"onclick"事件中添加代码来阻止用户更改其选中状态。以下是一个示例代码：

这段代码中，当用户点击单选按钮时，"onclick"事件将触发，并将"checked"属性设置为"false"，从而取消选中状态。这样就可以阻止用户更改其选中状态。

需要注意的是，使用以上方法仅适用于启用了JavaScript的浏览器。对于默认未启用JavaScript的浏览器，该方法将无效。

另外，还有其他一些方法可以实现类似的效果。例如，可以使用jQuery或Ajax来处理单选按钮的选中状态，或者使用"onclick"事件返回false来阻止用户更改选中状态。然而，需要注意的是，这些方法也无法阻止用户使用键盘改变选中状态。

总之，虽然HTML中没有直接提供"只读"属性或方法来设置单选按钮的只读状态，但可以通过使用JavaScript来实现类似的效果。以上是一种常用的方法，可以在"onclick"事件中将"checked"属性设置为"false"来阻止用户更改选中状态。

为什么无法将单选按钮设置为"只读"？

在开发过程中，有时我们希望将单选按钮设置为"只读"，即用户无法更改选中的值，而且在提交表单时选中的值仍然会被提交。然而，HTML并没有提供直接的"只读"属性来实现这一点。那么为什么无法将单选按钮设置为"只读"呢？

可以通过禁用未选中的单选按钮来实现"只读"的效果。这样一来，用户就无法选择其他的值，而选中的值在提交表单时仍然会被发送。下面是使用jQuery实现"只读"的方法：

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

这种方法同样适用于将下拉列表设置为"只读"，只需要将未选中的选项禁用即可。如果要使用readonly属性来实现"只读"，可以稍作修改：

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

在下面列出的解决方法中，这种方法提供了最简洁的代码，并且与jQuery验证器很好地配合使用，因为无需启用/禁用字段，也不需要在提交表单时解除绑定点击事件并重新绑定。

另一种巧妙的方法是使用.not(..)，这样可以在已经有一组选中的输入字段时使用。例如：

var myRadios = $('#specific-radios');
myRadios.not(':checked').prop('disabled',true);

这种方法同样适用于在Angular中使用elementRef。

HTML并没有提供直接的方法将单选按钮设置为"只读"，但可以通过禁用未选中的选项来实现这一效果。使用jQuery的相关方法可以实现这个需求，同时也提供了一种简洁的代码解决方案。

为什么无法将单选按钮设置为“只读”？

单选按钮只有在存在其他选项时才需要设置为只读。如果没有其他选项，选中的单选按钮将无法取消选择。如果有其他选项，您可以通过禁用其他选项来防止用户更改值。

解决方法之一是禁用其他选项：

第一个解决方案的问题是，如果我想通过JavaScript启用单选按钮，我会突然有两个具有相同名称的字段，因此我必须清理其中一个。或者使用隐藏字段并将单选按钮的值设置为隐藏字段的值。无论哪种方式，都比我希望的单选按钮更加麻烦。第二个解决方案虽然可以工作，但听起来像是一个非常丑陋的hack。所以我想JavaScript解决方案是唯一符合我的要求的解决方案。我会选择这个。

第二个解决方案实际上是一个糟糕的hack，可能在使用较少的浏览器（如“links”）上无法工作。它也无法在所有浏览器上工作，因为您可以通过TAB键访问它。它只会让用户困惑。

请使用第一个解决方案！这是唯一一个正确可访问的解决方案。如果需要使用脚本，只需添加一行代码将隐藏字段的启用状态设置为与单选按钮的启用状态相反。

我刚刚注意到，Jonathan的答案中，解决方案2和3的位置已经交换，所以现在评论看起来没有太多意义。

希望注意到JavaScript解决方案无效，它只是取消选中按钮。我认为应该使用onclick="return false"来防止更改。

onclick="return false"在FF15和Chrome22中有效，但是仍然会触发onchange事件。在IE9中，现有的点实际上被取消选择。对于我来说，只有解决方案1在这3个浏览器中都有效。如果需要JS操作，应该给单选按钮添加前缀/后缀以防止相同元素ID冲突，但是对于FORM提交来说，不需要，因为具有相同名称的最后一个元素会覆盖之前的值，但是禁用的元素不会提交。

我在下面发表了一个更优雅的解决方案。当然，这只是我的个人观点。

当我将单选按钮设置为“disabled”时，我会添加“style=cursor:default”以去除“disabled”光标。

如果一个单选按钮是只读的，并且存在其他选项，那么如果它是只读的，它将不会丢失其选中状态。这是浏览器方面的编程/规范上的错误。这对其他人来说很困难。为了使表单只读，需要跳过很多麻烦。