如何防止选择组中的一个单选按钮，但允许其他人取消选择它？答案

【问题标题】：How do you prevent ONE radio button in a group from being selected, but allow others to deselect it?如何防止选择组中的一个单选按钮，但允许其他人取消选择它？
【发布时间】：2009-12-12 00:00:17
【问题描述】：

我们有一个带有单选按钮组的表单，其中任何一个按钮都可能已被选中。我们希望阻止用户选择其中一个单选按钮，但我们希望能够通过单击任何其他单选按钮来“取消选择”该单选按钮。像这样：

第 1 步：（初始页面加载）

R1：已启用且可点击
R2：已禁用，但已检查
R3：已启用且可点击

第2步：用户点击R1

R1：已启用并已检查
R2：禁用，未检查
R3：已启用且可点击

'disabled' 属性会允许这种情况发生吗？

【问题讨论】：

如果您不希望某个特定的单选按钮被选中，甚至是可选择的，为什么要从页面开始呢？我知道当我遇到不可用的选项时，我通常会感到恼火。
我同意饭碗。如果有一个选项不可选择，那么我想要一个明显的理由来说明为什么它不可选择。一个很好的例子是表单中的“状态”选项。例如，来自法国的人不需要填写“州”选项。但是，对于在美国的用户来说，它仍然存在。
大家好。感谢您的意见。我省略了大部分用例，因为我不想解释系统的复杂性。我相信您知道，应用程序可能非常复杂，这就是我将其省略的原因。

标签： javascript html forms

【解决方案1】：

是的，会的。

这是一个简单的例子：http://jsbin.com/onuci

当然，我没有为此使用任何 JavaScript，但我只是想表明可以检查禁用的单选按钮（示例中为 R2），但是当用户单击其他两个按钮中的任何一个时，它变为未选中，无法再次选中。

【讨论】：

嘿...我应该自己测试一下 :-)。但是，嘿，你有几个额外的代表点来做一个简单的（或者是豌豆？）。谢谢杰夫！

【解决方案2】：

我建议为此使用复选框。如果我不小心激活了“R1”然后想停用它会怎样？

【讨论】：

是的，那是我没有解释的用例的一部分……谢谢！

【解决方案3】：

jQuery 可以很容易地做到这一点：http://jquery.com/

<html>
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3.2");

        $(document).ready(function () {
            $("r1").click(function () { 
                $("r2").removeAttr("checked");
            });
        });
    </script>
</head>
<body>

<form action="form_action.php" method="get">
  <input id="r1" type="radio" name="dog" value="Gus" /> Gus<br />
  <input id="r2" type="radio" name="dog" value="Bruce" checked="checked" disabled="disabled" /> Bruce<br />
  <input id="r3" type="radio" name="dog" value="Champ" /> Champ<br />
  <input type="submit" value="Submit" />
</form>

</body>
</html>

【讨论】：

呸，我的工程过度了。