September 18, 2021

How to Disable a Radio Button in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable a radio button in javascript. We only disable an element when we do not want any sort of user interaction under certain circumstances.

A good example can be of a website where we have 2 kinds of users, free and pro. Pro users will have access to all the features whereas certain features will be disabled for free users.

You can disable an element using disable attribute in the HTML file. The same attribute is applicable to a radio button. With the help of javascript, we can enable or disable radio buttons dynamically.

In the following example, we have a dropdown list with 2 options, Yes and No. We will disable all radio buttons if the user selects No. Please have a look over the code example and the steps given below.

HTML & CSS

We have a few elements in the HTML file and that includes div, select, option, h1, input, and label.
The div element with a class of container is just a wrapper for the rest of the elements.
The select element has 2 options “Yes” and “No”.
We have 2 radio buttons and they will be disabled dynamically with the help of javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <h1>Are you a Developer?</h1>
        <div>
            <select>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
            <label><input type="radio" name="programming" value="csharp"> C#</label>
            <label><input type="radio" name="programming" value="javascript"> Javascript</label>
        </div>

    </div>

    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

.container {
    display: inline-block;
}

Javascript

We have selected select element using document.querySelector() and stored it in select variable.
We have selected all the radio button elements using document.querySelectorAll() and stored them in radioButtons variable.
We have attached the change event listener to the select element.
In the event handler function, we are getting the value of the selected option.
If the selected option is “No”, then we will loop through all the radio buttons using the forEach() method and set their disabled property to True.
If the selected option is “Yes”, then we will set their disabled property to False.

let select = document.querySelector('select');
let radioButtons = document.querySelectorAll('input[type="radio"]');

select.addEventListener('change', () =>{
    let result = select.options[select.selectedIndex].value;

    if(result == 'no') radioButtons.forEach(radioButton => radioButton.disabled = true)
    else radioButtons.forEach(radioButton => radioButton.disabled = false)
});

You May Also Like: