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 s。

Answer 1

只需向他们提供相同的name但不同的value s;这将自动发生，因为这是单选按钮的设计方式。

Answer 2

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

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

Answer 3

如果您将相同的name提供给一组单选按钮，则只要您点击它们，它们就会自动检查/取消选中。但是对于每个没有标记的单选按钮，ID应该是唯一的。看看这个工作演示，我希望这是你正在寻找的。

正在使用 demo

Answer 4

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

Answer 5

＆＃13;

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

＆＃13;

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

＆＃13;

或者如果您对多个元素使用相同的名称，那么您可以选择其中一个。

Answer 6

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

如果你想要

，你可以改变不同值的id

如果选择了另一个，则取消选择单选按钮

6 个答案: