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; }); }); });
<formaction=""><inputtype="radio"name="level"value="8">Beginner<br><inputtype="radio"name="level"value="4">Intermediate<br><inputtype="radio"name="level"value="2">Pro<br></form>

Solution 2:

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

<formaction=""name="formName"><inputtype="radio"name="level"value="8">Beginner<br><inputtype="radio"name="level"value="4">Intermediate<br><inputtype="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"