How to disable radio button using JavaScript ?

Last Updated : 01 Dec, 2021

In HTML, we have a feature through which we can select one option out of multiple given options, and we can do that with the help of the Radio button. So, In this article, we will learn how we can disable these radio buttons for some circumstances. we will see how radio buttons work and why we need to disable them, we will have some standard examples to get a better understanding of what we are going to do.

Radio buttons basically are some selectable buttons, we can use these buttons to select a single option from multiple given options and we have to select almost one option from all radio buttons options.

Why do we need to disable them ?

We use radio buttons for selecting any one option from multiple, but in some scenarios, we have to disable them. for example, we have two questions that do we like to play games or not, if we select yes then we can select any option from multiple options, but if we choose no in the first place then we have to disable those games options we user can’t choose them, we will see this in example and get a better understanding.

How are we going to disable the radio button: In HTML for the input element we have an attribute called disabled, this is a boolean-valued attribute, we can choose between true or false, we will use this attribute to disable the radio button.

Example 1: In this example, we have two questions the first one is a “yes” or “no” question, if the user select “yes” the radio buttons will not be disabled if the user selects “no” then we will disable the radio buttons.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <!-- CSS code required for the page -->
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10%;
            background: rgb(51, 51, 51);
        }
 
        .main {
            width: 60%;
            height: 100%;
            background-color: #f2f2f2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px;
            border-radius: 20px;
            background-color: rgb(0, 0, 0);
            color: white;
            font-family: montserrat;
            font-size: 0.8rem;
        }
 
        #submit {
            width: 30%;
            margin: 20px;
            height: 40px;
            border-radius: 20px;
            background-color: rgb(0, 133, 7);
            color: rgb(0, 0, 0);
            font-family: montserrat;
            font-size: 1rem;
            font-weight: bold;
            border: none;
            cursor: pointer;
        }
 
        #submit:hover {
            background-color: rgb(0, 98, 5);
            color: rgb(0, 0, 0);
        }
    </style>
</head>
 
<body>
    <div class="main">
        <h1>Do you listen musing while coding?</h1>
 
        <div class="question1">
            <label>
                <input name="music" type="radio"
                    id="yes" value="yes" /> Yes
            </label>
            <label>
                <input name="music" type="radio" id="no"
                    value="no" onchange="check()" /> No
            </label>
        </div>
 
        <h2>
            If yes, What kind of music 
            do you prefer?
        </h2>
         
        <div class="question2">
            <label>
                <input type="radio" name="Musics"
                    id="Pop" value="pop" />Pop</label>
            <label>
                <input type="radio" name="Musics"
                    id="Rock" value="rock" />Rock</label>
            <label>
                <input type="radio" name="Musics"
                    id="Jazz" value="jazz" />Jazz</label>
            <label>
                <input type="radio" name="Musics"
                    id="Classical" value="classical" />
                    Classical
                </label>
        </div>
 
        <button id="submit" onclick="message()">
            submit
        </button>
    </div>
 
    <script>
 
        // This function will check if the user has
        // selected any option from the question 1
        function check() {
            if (document.getElementById('no').checked) {
                document.getElementById('Pop').disabled = true;
                document.getElementById('Rock').disabled = true;
                document.getElementById('Jazz').disabled = true;
                document.getElementById('Classical').disabled = true;
            }
 
            else {
                document.getElementById('Pop').disabled = false;
                document.getElementById('Rock').disabled = false;
                document.getElementById('Jazz').disabled = false;
                document.getElementById('Classical').disabled = false;
            }
        }
         
        // This function will give the message after
        // the user clicks on the submit button.
        function message() {
            if (document.getElementById('yes').checked) {
                if (document.getElementById('Pop').checked) {
                    alert("You like pop music");
                }
                else if (document.getElementById('Rock').checked) {
                    alert("You like rock music");
                }
                else if (document.getElementById('Jazz').checked) {
                    alert("You like jazz music");
                }
                else if (document.getElementById('Classical').checked) {
                    alert("You like classical music");
                }
            }
            else {
                alert("You don't listen musing while coding");
            }
            alert("Thank you for your response!");
        }
    </script>
</body>
 
</html>

Output:

Example 2: In this example, we will have three questions, on the basis of the first question we will disable one question from the remaining two questions and vice versa.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <!-- CSS code required for the page -->
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10%;
            background: rgb(51, 51, 51);
        }
 
        .main {
            width: 60%;
            height: 100%;
            background-color: #f2f2f2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px;
            border-radius: 20px;
            background-color: rgb(255, 255, 255);
            color: rgb(27, 27, 27);
            font-family: montserrat;
            font-size: 0.8rem;
        }
 
        #submit {
            width: 30%;
            margin: 20px;
            height: 40px;
            border-radius: 20px;
            background-color: rgb(34, 34, 34);
            color: rgb(255, 255, 255);
            font-family: montserrat;
            font-size: 1rem;
            font-weight: bold;
            border: none;
            cursor: pointer;
        }
 
        #submit:hover {
            background-color: rgb(0, 98, 5);
            color: rgb(0, 0, 0);
        }
    </style>
</head>
 
<body>
    <div class="main">
        <h1>What kind of meal do you prefer?</h1>
 
        <div class="question">
            <label> <input type="radio" name="meal"
                id="veg" onchange="check()">Veg</label>
            <label> <input type="radio" name="meal"
                id="nonveg" onchange="check()">
                Non-Veg
            </label>
        </div>
 
        <h2>Veg menu</h2>
         
        <div class="veg_menu">
            <label> <input type="radio"
                name="veg_meal" id="salad">Salad</label>
            <label> <input type="radio"
                name="veg_meal" id="soup">Soup</label>
            <label> <input type="radio"
                name="veg_meal" id="dessert">Dessert
            </label>
        </div>
 
        <h2>Non-veg Menu</h2>
         
        <div class="non-veg_menu">
            <label> <input type="radio"
                name="non_veg_meal" id="chicken">Chicken</label>
            <label> <input type="radio" name="non_veg_meal"
                id="mutton">Mutton</label>
            <label> <input type="radio" name="non_veg_meal"
                id="fish">Fish</label>
        </div>
        <button id="submit" onclick="message(),resetMessage()">
            submit
        </button>
    </div>
 
    <script>
        function check() {
            if (document.getElementById('veg').checked) {
                document.getElementById('chicken').disabled = true;
                document.getElementById('mutton').disabled = true;
                document.getElementById('fish').disabled = true;
                document.getElementById('salad').disabled = false;
                document.getElementById('soup').disabled = false;
                document.getElementById('dessert').disabled = false;
            }
            else if (document.getElementById('nonveg').checked) {
                document.getElementById('salad').disabled = true;
                document.getElementById('soup').disabled = true;
                document.getElementById('dessert').disabled = true;
                document.getElementById('chicken').disabled = false;
                document.getElementById('mutton').disabled = false;
                document.getElementById('fish').disabled = false;
            }
        }
        function message() {
            if (document.getElementById('veg').checked) {
                if (document.getElementById('salad').checked) {
                    alert("You have selected Salad");
                }
                else if (document.getElementById('soup').checked) {
                    alert("You have selected Soup");
                }
                else if (document.getElementById('dessert').checked) {
                    alert("You have selected Dessert");
                }
                else {
                    alert("Please select a meal");
                }
            }
            else if (document.getElementById('nonveg').checked) {
                if (document.getElementById('chicken').checked) {
                    alert("You have selected Chicken");
                }
                else if (document.getElementById('mutton').checked) {
                    alert("You have selected Mutton");
                }
                else if (document.getElementById('fish').checked) {
                    alert("You have selected Fish");
                }
                else {
                    alert("Please select a meal");
                }
            }
            else {
                alert("Please select a meal");
            }
        }
    </script>
</body>
 
</html>