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 name
s.
Simply give them the same name
but different value
s; this will then happen automatically as this is how radio buttons are designed.
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
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);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With