Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Deselect Radio Button if another one is selected

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.

like image 213
testit Avatar asked Aug 28 '11 16:08

testit


3 Answers

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

like image 125
Sophie Alpert Avatar answered Oct 20 '22 15:10

Sophie Alpert


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

like image 31
ShankarSangoli Avatar answered Oct 20 '22 15:10

ShankarSangoli


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);
    }
});
like image 2
Joseph Silber Avatar answered Oct 20 '22 14:10

Joseph Silber