如果选择了另一个单选按钮，请取消选择单选按钮答案

【问题标题】：Deselect Radio Button if another one is selected如果选择了另一个单选按钮，请取消选择单选按钮
【发布时间】：2011-11-05 12:40:22
【问题描述】：

考虑以下标记：

<form>

<div class="project">
<ul class="choice">
    <li><label for="firstchoice_1">First choice</label><input type="radio" name="firstchoice" value="1" id="firstchoice_1" /></li>
    <li><label for="secondchoice_1">Second choice</label><input type="radio" name="secondchoice" value="1" id="secondchoice_1" /></li>
</ul>
</div>

<div class="project">
<ul class="choice">
    <li><label for="firstchoice_2">First choice</label><input type="radio" name="firstchoice" value="2" id="firstchoice_2" /></li>
    <li><label for="secondchoice_2">Second choice</label><input type="radio" name="secondchoice" value="2" id="secondchoice_2" /></li>
</ul>
</div>

</form>

我想要做的是禁用一个，如果每个.project 组中的单选按钮在选择另一个时禁用（因此每个组中只能选择First choice 或Second choice）。我知道该怎么做是在一种特定情况下禁用一个特定的单选按钮，但我不知道如何概括这一点，因为它们可能是一百个这样的.project 组。

编辑：请注意，只能选择整个First choice（反之亦然）。该名称已使用相同的名称。在整个标记中使用相同的name 属性。只有两个不同的names。

【问题讨论】：

这是一个有价值的问题！我正在开发一个移动应用程序，其中每个单选按钮切换一个单独的表单，因此这些按钮不属于同一组..所以本机行为不再起作用。

标签： jquery radio-button

【解决方案1】：

只需给他们相同的name，但不同的values；这将自动发生，因为这就是单选按钮的设计方式。

【讨论】：

【解决方案2】：

如果您将相同的name 指定给一组单选按钮，那么只要您单击它们，它们就会自动选中/取消选中。但是对于您的标记中不存在的每个单选按钮，ID 应该是唯一的。看看这个工作演示，我希望这就是你想要的。

工作demo

【讨论】：

【解决方案3】：

您必须在所有单选按钮上收听更改事件。当其中任何一个发生更改时，您将检查它是否已被检查。如果是这样，您将取消选中该 .project 中的所有其他单选按钮：

$('input[type=radio]').change(function()
{
    if (this.checked)
    {
        $(this).closest('.project')
            .find('input[type=radio]').not(this)
            .prop('checked', false);
    }
});

【讨论】：

看起来很有希望，我会看看这个。

【解决方案4】：

您只需为组中的所有按钮使用相同的名称。然后浏览器会自动禁用。

【讨论】：

【解决方案5】：

您只需为组中的所有按钮使用相同的名称。然后浏览器会自动禁用。

如果你愿意，你可以改变不同值的id

【讨论】：

【解决方案6】：

 $(function(){
 if($(this).attr('checked')==true)
    {
        $('.project').not(this).attr('checked',false);
    }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

<div class="project">
<ul class="choice">
    <li><label for="firstchoice_1">First choice</label><input type="radio" name="firstchoice" value="1" id="firstchoice_1" /></li>
    <li><label for="secondchoice_1">Second choice</label><input type="radio" name="secondchoice" value="1" id="secondchoice_1" /></li>
</ul>
</div>

<div class="project">
<ul class="choice">
    <li><label for="firstchoice_2">First choice</label><input type="radio" name="firstchoice" value="2" id="firstchoice_2" /></li>
    <li><label for="secondchoice_2">Second choice</label><input type="radio" name="secondchoice" value="2" id="secondchoice_2" /></li>
</ul>
</div>

</form>

或者，如果您对多个元素使用相同的名称，那么您将能够从中选择一个。

【讨论】：