Deselect Radio Button if another one is selected

Question

Considering the following markup:

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

What I want to do is to disable one if the radio button in every .project group whenever the other one was selected (so only First choice or Second choice in every group can be selected). What I know how to do is to disable one specific radio button in one specific case but I don't know how to generalize this as they may are a hundred of such .project groups.

Edit: Please note that only of the whole First choice (and vice versa) can be selected. The same name is already used for that one. The same name attribute is used throughout the whole markup. There are only two different names.

Devisal

This is a worthwhile question! I'm working on a mobile app where each radio button toggles a separate form, so the buttons aren't part of the same group..so the native behavior no longer works. – Multiped

Answer 1

Simply give them the same name but different values; this will then happen automatically as this is how radio buttons are designed.

Jenelljenelle

Answer 2

If you give same name to a set of radio buttons then they automatically check/uncheck whenever you click on them. But the ids should be unique for each of the radio buttons which is not there your markup. Take a look at this working demo, I hope this is what you are looking for.

Working demo

Disquiet

Answer 3

You have to listen to the change event on all radio buttons. When any one of them changes, you'll check to see whether it got checked. If it did, you'll then uncheck all the other radio buttons within that .project:

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

Dogged

Seems promising, I'll check this one out. – Devisal

Answer 4

You just have to use the same name for all buttons in a group. Then the browser does the disabling automatically.

Manifesto

Answer 5

You just have to use the same name for all buttons in a group. Then the browser does the disabling automatically.

u can change the id for different values if u want

Interstate

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>

Or if you use same name for multiple element then you will able to select one among them.

Liquidate