A radio button is a specific type of input utilized to gather user input by allowing the selection of a single option from a set of multiple alternatives. A common example of radio buttons is the selection of gender, where users can choose between male and female. In this scenario, the user can only select one option, either male or female, while the other option remains unselected.
There may be instances where it becomes necessary to deactivate other options based on specific criteria. You can control the activation and deactivation of radio buttons by utilizing the disabled attribute within the HTML Document Object Model (DOM). To disable a radio button in JavaScript, assign this attribute the value of true ( disable=true ).
Disable the radio button
At times, it becomes necessary to deactivate a radio button due to certain conditions. These particular scenarios dictate when the radio button should be rendered inactive. Once the radio buttons are disabled, their appearance alters to a grey hue.
In the following examples, we will explore the methods to deactivate the radio button:
Disable radio button using dropdown
In this section, we will implement a dropdown menu that contains two options: Yes and No. The purpose of this dropdown is to control the state of the radio buttons. When you select No, every radio button will be rendered inactive. Conversely, if you opt for Yes, all the radio buttons will become active and functional.
Note that you can use the checkbox as well instead of a dropdown list.
Copy Code
<html>
<script>
function verifyAnswer() {
//get the selected value from the dropdown list
var mylist = document.getElementById("myAns");
var result = mylist.options[mylist.selectedIndex].text;
if (result == 'No') {
//disable all the radio button
document.getElementById("csharp").disabled = true;
document.getElementById("js").disabled = true;
document.getElementById("angular").disabled = true;
} else {
//enable all the radio button
document.getElementById("csharp").disabled = false;
document.getElementById("js").disabled = false;
document.getElementById("angular").disabled = false;
}
}
</script>
<body>
<h2> Disable radio Button using dropdown </h2>
<form>
<!-- create a dropdown list -->
<h3> Are you a developer? </h3>
<select id = "myAns" onchange = "verifyAnswer()" >
<option value="choose"> --choose -- </option>
<option value="yes"> Yes </option>
<option value="no"> No </option>
</select>
</form>
<p> <b> If Yes, Choose language your preferred programming Language</b> </p>
<!-- create a set of radio buttons -->
<label> <input type="radio" name="programming" id="csharp" value= "csharp"> C# </label>
<label> <input type="radio" name="programming" id="js" value= "js"> JavaScript </label>
<label> <input type="radio" name="programming" id="angular" value= "angular"> Angular </label>
</body>
</html>
Output 1
By executing the code provided above, you will receive an output identical to what is shown below. Initially, select either Yes or No from the dropdown menu.
Output 2
When you opt for No from the dropdown menu, all radio buttons will become inactive, preventing you from selecting any programming languages. Refer to the screenshot provided below:
Output 2
By choosing Yes from the dropdown menu, all radio buttons will be reactivated. Consequently, you will have the opportunity to select a programming language. Refer to the screenshot provided below:
Disable radio button using checkbox
At this point, we will implement a checkbox that will be utilized to deactivate the radio button.
Copy Code
<html>
<script>
function verifyAnswer() {
//disable all the radio button
document.getElementById("csharp").disabled = true;
document.getElementById("js").disabled = true;
document.getElementById("angular").disabled = true;
//get the value if checkbox is checked
var dev = document.getElementById("myCheck").checked;
if (dev == true) {
//enable all the radio button
document.getElementById("csharp").disabled = false;
document.getElementById("js").disabled = false;
document.getElementById("angular").disabled = false;
}
}
</script>
<body>
<h2> Disable radio Button using checkbox </h2>
<form>
<!-- create a dropdown list -->
<h3> Are you a developer? </h3>
Yes:
<input type="checkbox" id="myCheck" onchange="verifyAnswer()" checked>
</form>
<p> <b> If Yes, Choose language your preferred programming Language</b> </p>
<!-- create a set of radio buttons -->
<label> <input type="radio" name="programming" id="csharp" value= "csharp"> C# </label>
<label> <input type="radio" name="programming" id="js" value= "js"> JavaScript </label>
<label> <input type="radio" name="programming" id="angular" value= "angular"> Angular </label>
</body>
</html>
Output
Executing the code provided above will generate an output identical to the one shown below. In this scenario, the checkbox has been pre-selected; your task is simply to select a programming language by clicking on the corresponding radio button.
If you are not a developer, please deselect the checkbox. By doing so, the radio buttons will become inactive.
Here are various approaches to deactivate the radio button.
A simple radio button example
Here is a straightforward illustration of a radio button implementation. In this instance, we will establish a group of radio buttons for selecting both gender and language preferences. The data will be gathered through an HTML form and processed using JavaScript. Please refer to the code provided below:
Copy Code
<html>
<script>
function calValue() {
//fetch all gender radio button data
var male = document.getElementById('g1');
var female = document.getElementById('g2');
var otherg = document.getElementById('g3');
//fetch all language radio button data
var hindi = document.getElementById('l1');
var english = document.getElementById('l2');
var otherl = document.getElementById('l3');
var gender;
var language;
//check which gender is selected using radio button
if(male.checked == true) {
gender = male;
} else if(female.checked == true) {
gender = female;
} else if(otherg.checked == true) {
gender = otherg
}
//check which language is selected using radio button
if(hindi.checked == true) {
language = hindi;
} else if(english.checked == true) {
language = english;
} else if(otherl.checked == true) {
language = otherl
}
//return data to HTML form
return document.getElementById("result").innerHTML = "Your selected gender is: " + gender.value + "</br> and </br> Selected language is: " + language.value;
}
</script>
<body>
<h2> Simple radio Buttons Example </h2>
<!-- create radio button for gender selection -->
<p> <b> Select your gender: </b> </p>
<input type="radio" id="g1" name="gender" value="male">
<label for="male"> Male </label> <br>
<input type="radio" id="g2" name="gender" value="female">
<label for="female"> Female </label> <br>
<input type="radio" id="g3" name="gender" value="other">
<label for="other"> Other </label>
<br>
<!-- create radio button for language selection -->
<p> <b> Select your language: </b> </p>
<input type ="radio" id="l1" name="language" value="hindi">
<label for ="male"> Hindi </label> <br>
<input type="radio" id="l2" name="language" value="english">
<label for="female"> English </label> <br>
<input type="radio" id="l3" name="language" value="other">
<label for="other"> Other </label> <br> <br>
<input type="submit" value="Submit" onclick="calValue()">
<h3 id="result" style="color:blue"> </h3>
</body>
</html>
Output
Refer to the screenshot below, which illustrates a radio button configuration. In this setup, one option must be chosen from each group of radio buttons. In this instance, we have chosen gender = female and language = hindi.
Once you have chosen the values from the radio buttons, simply click on the Show Selected Values button, and the chosen values will be presented on the webpage.