How to disable radio button using JavaScript ?
Last Updated :
21 May, 2025
Improve
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.
<!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.
<!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>
