如果选择了另一个单选按钮，取消当前单选按钮的选择状态。

Question

考虑以下标记：

<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属性。只有两个不同的name。

- testit

---

这是一个值得思考的问题！我正在开发一个移动应用程序，其中每个单选按钮都切换到一个单独的表单，因此这些按钮不属于同一组...因此原生行为不再起作用。 - Marcy Sutton

Answer 1

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

- Sophie Alpert

Answer 2

如果你给一组单选按钮相同的“name”属性，那么每次单击它们时它们会自动勾选 / 取消勾选。但每个单选按钮的id应该是唯一的，在你的标记中没有这样的设置。请查看这个工作演示，我希望这正是你正在寻找的。

演示：demo

- ShankarSangoli

Answer 3

您需要监听所有单选按钮的更改事件。当它们中的任何一个更改时，您将检查它是否被选中。如果是，则取消选择该.project内的所有其他单选按钮：

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

- Joseph Silber

---

看起来很有前途，我会去试试看。 - testit

Answer 4

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

如果需要，您可以更改不同值的ID。

- Ritam

Answer 5

您只需在同一组中使用相同的名称即可。然后浏览器会自动禁用它们。

- migu

Answer 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>

或者，如果您为多个元素使用相同的名称，则可以在它们之间选择一个。

- lalithkumar