How To Disable Radio Button Using JavaScript
Nov 13, 2021 . Admin
Hello Friends,
Now let's see example of how to disable radio button example.We will check how to disable radio button. This is a short guide on disable radio button in javascript. Here you will learn how to get javascript timer. Let's get started with how to disable radio button in javascript.
Here i will give you many example how to disable radio button using javascript.
Example : 1
<html>
<head>
<title>How To Disable Radio Button Using JavaScript - MyWebtuts.com</title>
</head>
<body>
<h3>How To Disable Radio Button Using JavaScript - MyWebtuts.com</h3>
<form>
<h3>Are you a developer?</h3>
<p> Disable radio Button using dropdown </p>
<select id = "a1" onchange = "radioAns()" >
<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>
<label><input type="radio" name="programming" id="laravel" value= "laravel"> Laravel</label>
<label><input type="radio" name="programming" id="js" value= "js"> JavaScript</label>
<label><input type="radio" name="programming" id="php" value= "php">Php</label>
<script>
function radioAns() {
var myLang = document.getElementById("a1");
var result = myLang.options[myLang.selectedIndex].text;
if(result == 'No'){
document.getElementById("laravel").disabled = true;
document.getElementById("js").disabled = true;
document.getElementById("php").disabled = true;
}else {
document.getElementById("laravel").disabled = false;
document.getElementById("js").disabled = false;
document.getElementById("php").disabled = false;
}
}
</script>
</body>
</html>
Output :
No If Yes, Choose Language Your Preferred Programming Language Laravel, JavaScript, Php (Disabled)Example : 2
<html>
<head>
<title>How To Disable Radio Button Using JavaScript - MyWebtuts.com</title>
</head>
<body>
<h3>How To Disable Radio Button Using JavaScript - MyWebtuts.com</h3>
<form>
<h3>Are you a developer?</h3>
<p> Disable Radio Button Using Checkbox </p>
Yes :
<input type="checkbox" id="a1" onchange="rdbtn()" checked>
</form>
<p><b> If Yes, Choose Language Your Preferred Programming Language</b></p>
<label><input type="radio" name="programming" id="laravel" value= "laravel">Laravel</label>
<label><input type="radio" name="programming" id="js" value= "js"> JavaScript</label>
<label> <input type="radio" name="programming" id="php" value= "php">Php</label>
<script>
function rdbtn() {
document.getElementById("laravel").disabled = true;
document.getElementById("js").disabled = true;
document.getElementById("php").disabled = true;
var a2 = document.getElementById("a1").checked;
if (a2 == true) {
document.getElementById("laravel").disabled = false;
document.getElementById("js").disabled = false;
document.getElementById("php").disabled = false;
}
}
</script>
</body>
</html>
Output :
Yes If Yes, Choose Language Your Preferred Programming Language Laravel, JavaScript, Php (Enable)
It will help you...