Отмените выбор переключателя, если выбран другой

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

Answer 1

Просто дайте им одинаковые name, но разные value с;тогда это произойдет автоматически, поскольку так устроены переключатели.

Answer 2

Если вы дадите одинаковые name для набора переключателей, они будут автоматически отмечаться / сниматься при каждом нажатии на них.Но идентификаторы должны быть уникальными для каждой из переключателей, которых нет в вашей разметке.Взгляните на эту рабочую демонстрацию, надеюсь, это то, что вы ищете.

Рабочая демо

Answer 3

Вы должны прослушать событие изменения на всех переключателях. Когда какой-либо из них изменится, вы проверите, проверено ли оно. Если это так, то вы снимите все остальные переключатели в этом .project:

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

Answer 4

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

Или, если вы используете одно и то же имя для нескольких элементов, вы сможете выбрать один из них.

Answer 5

Вам просто нужно использовать одно и то же имя для всех кнопок в группе.Затем браузер автоматически отключает эту функцию.

вы можете изменить идентификатор для разных значений, если хотите

Answer 6

Вам просто нужно использовать одно и то же имя для всех кнопок в группе.Затем браузер автоматически отключит систему.