CODEWITHSUNDEEP
jqueryradio-button
testit
testit

Reputation: 71

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.

Upvotes: 7

Views: 27976

Answers (6)

lalithkumar
lalithkumar

Reputation: 3530

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

Upvotes: 0

Ritam
Ritam

Reputation: 11

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

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

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

Upvotes: 3

Joseph Silber
Joseph Silber

Reputation: 219920

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);
    }
});

Upvotes: 2

migu
migu

Reputation: 1391

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

Upvotes: 0

Sophie Alpert
Sophie Alpert

Reputation: 143114

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

Upvotes: 14

Related Questions