Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Disable Radio Buttons using JavaScript?
A radio button is an input type that allows users to select one option from multiple choices. In web forms, you may need to disable radio buttons dynamically based on user interactions or specific conditions.
In this article, we will explore how to disable and enable radio buttons using JavaScript. We'll cover the disabled property and demonstrate practical examples where radio buttons are conditionally disabled.
The disabled Property
JavaScript provides the disabled property to control whether form elements are interactive. This boolean property can be set to true to disable an element or false to enable it.
Syntax
// Disable a radio button
document.getElementById('radioId').disabled = true;
// Enable a radio button
document.getElementById('radioId').disabled = false;
Basic Example: Disabling Radio Buttons
<!DOCTYPE html>
<html>
<head>
<title>Disable Radio Buttons</title>
</head>
<body>
<h3>Select your preferred programming language:</h3>
<label>
<input type="radio" name="language" id="javascript" value="JavaScript">
JavaScript
</label><br>
<label>
<input type="radio" name="language" id="python" value="Python">
Python
</label><br>
<label>
<input type="radio" name="language" id="java" value="Java">
Java
</label><br><br>
<button onclick="disableAll()">Disable All</button>
<button onclick="enableAll()">Enable All</button>
<script>
function disableAll() {
document.getElementById('javascript').disabled = true;
document.getElementById('python').disabled = true;
document.getElementById('java').disabled = true;
}
function enableAll() {
document.getElementById('javascript').disabled = false;
document.getElementById('python').disabled = false;
document.getElementById('java').disabled = false;
}
</script>
</body>
</html>
Conditional Disabling Example
Here's a practical example where radio buttons are disabled based on a user's selection:
<!DOCTYPE html>
<html>
<head>
<title>Conditional Radio Button Disable</title>
<style>
.container {
margin: 20px;
font-family: Arial, sans-serif;
}
.question {
margin: 15px 0;
}
button {
padding: 10px 20px;
margin: 10px 5px;
border-radius: 5px;
border: 1px solid #ccc;
cursor: pointer;
}
button:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<h2>Survey Form</h2>
<div class="question">
<h3>Do you have programming experience?</h3>
<label>
<input type="radio" name="experience" value="yes" onchange="toggleSkillLevel()">
Yes
</label>
<label>
<input type="radio" name="experience" value="no" onchange="toggleSkillLevel()">
No
</label>
</div>
<div class="question">
<h3>What is your skill level?</h3>
<label>
<input type="radio" name="skill" id="beginner" value="beginner">
Beginner
</label>
<label>
<input type="radio" name="skill" id="intermediate" value="intermediate">
Intermediate
</label>
<label>
<input type="radio" name="skill" id="advanced" value="advanced">
Advanced
</label>
</div>
<button onclick="submitForm()">Submit</button>
</div>
<script>
function toggleSkillLevel() {
const experienceRadios = document.querySelectorAll('input[name="experience"]');
const skillRadios = document.querySelectorAll('input[name="skill"]');
let hasExperience = false;
experienceRadios.forEach(radio => {
if (radio.checked && radio.value === 'yes') {
hasExperience = true;
}
});
// Disable skill level options if user has no experience
skillRadios.forEach(radio => {
radio.disabled = !hasExperience;
if (!hasExperience) {
radio.checked = false; // Clear selection
}
});
}
function submitForm() {
const experience = document.querySelector('input[name="experience"]:checked');
const skill = document.querySelector('input[name="skill"]:checked');
if (!experience) {
alert('Please select your programming experience');
return;
}
let message = `Experience: ${experience.value}`;
if (experience.value === 'yes' && skill) {
message += `, Skill Level: ${skill.value}`;
}
alert(message);
}
</script>
</body>
</html>
Using querySelectorAll for Multiple Radio Buttons
For better code organization, you can disable multiple radio buttons at once using querySelectorAll():
<!DOCTYPE html>
<html>
<head>
<title>Bulk Disable Radio Buttons</title>
</head>
<body>
<h3>Color Preferences:</h3>
<label><input type="radio" name="colors" value="red"> Red</label>
<label><input type="radio" name="colors" value="blue"> Blue</label>
<label><input type="radio" name="colors" value="green"> Green</label>
<br><br>
<button onclick="toggleColors(true)">Disable All Colors</button>
<button onclick="toggleColors(false)">Enable All Colors</button>
<script>
function toggleColors(disable) {
const colorRadios = document.querySelectorAll('input[name="colors"]');
colorRadios.forEach(radio => {
radio.disabled = disable;
});
console.log(disable ? 'All colors disabled' : 'All colors enabled');
}
</script>
</body>
</html>
Key Points
- Use the
disabledproperty to control radio button accessibility - Set
disabled = trueto disable,disabled = falseto enable - Disabled radio buttons cannot be selected or changed by users
- Use
querySelectorAll()to handle multiple radio buttons efficiently - Clear selections when disabling to avoid confusion
Conclusion
Disabling radio buttons dynamically improves user experience by guiding users through logical form flows. Use the disabled property along with event handlers to create responsive, interactive forms.
Updated on: 2026-03-15T23:19:00+05:30
2K+ Views
Advertisements