Skip to content Skip to sidebar Skip to footer
Home / Dom / Html / Javascript / Radiobuttonlist

After Selecting One Radio Button, I Want The Remaining Buttons To Become Disabled

Post a Comment
I am working on a pong game in java script where one can change the difficulty level using a set of radio buttons
)); radios.forEach(function(radio) { radio.addEventListener('change', function() { radios.forEach(function(r) { r.disabled = r !== radio; }); }); }); 
<form action="">
  <input type="radio" name="level" value="8">Beginner<br>
  <input type="radio" name="level" value="4">Intermediate<br>
  <input type="radio" name="level" value="2">Pro<br>
</form>

Solution 2:

If you just want to disable them after one click then this should do.. 

 <form action="" name="formName">
            <input type="radio" name="level" value="8">Beginner<br> 
            <input type="radio" name="level" value="4">Intermediate<br>
            <input type="radio" name="level" value="2">Pro<br>        
          </form>

Onclick event 

$("input:radio[name=level]").click(function(){
    var radios = document.formName.level;

        for (var i=0, iLen=radios.length; i<iLen; i++) {
          radios[i].disabled = true;
        } 
});

Here is a fiddle Click here


Solution 3:

You can do it with plain javascript.

var buttons = document.getElementsByName('level');

for(var i = 0; i < buttons.length; i++)
{
    buttons[i].onclick = function()
    {
    	for(var j = 0; j < buttons.length; j++)
        {
            if(j != i)
            {
                buttons[j].setAttribute('disabled', 'true');
            }
        }
    }
}

Also I would get rid of the <form> tag since it serves no purpose here.


Post a Comment for "After Selecting One Radio Button, I Want The Remaining Buttons To Become Disabled"