How to disable radio button using JavaScript ?

Last Updated : 21 May, 2025

Radio buttons let users select one option from many, commonly used in forms. Sometimes, based on a user's previous choice, certain options need to be disabled. For example, if a user selects "No" to playing games, we can disable related game options. Using JavaScript, about 65% of forms use such logic to guide user input. In this article, you’ll learn how to disable radio buttons using the disabled attribute with simple, real-life examples.

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.

index.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.

index.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>