Disable radio button

We can enable or disable radio buttons ( Period buttons ) by using a checkbox inside a form. Let us try first by directly disabling a radio button. ( Here Male radio button is disabled )

Male FeMale

Here is the code

<input type=radio name=gender value=male id='r1' disabled>Male 

<input type=radio name=gender value=female id='r2'>FeMale

But here we are not able to change the status as per requirement so we will use JavaScript here to manage the radio buttons by using a checkbox.
DEMO of enable radio button by checkbox
Let us see how this script works. Here is the code.

<html>
<head>
<title>Demo of enable disable period button by checkbox</title>
<link rel="stylesheet" href="../images/all11.css" type="text/css">
<script language="JavaScript">
<!--

function enable_radio(status)
{
status=!status;
document.getElementById("r1").disabled=status;
document.getElementById("r2").disabled=status;
}
//-->
</script>
</head>
<body onload=enable_radio(false);>

<form name=f1 method=post action=period-disable-demock.php>
<input type="checkbox" name=others onclick="enable_radio(this.checked)" value='yes'>Others<br>
<input type=radio name=gender value=male id='r1'>Male 
<input type=radio name=gender value=female id='r2'>FeMale 
<input type=submit value=Submit>
</form>
</body>
</html>

JavaScript Validation Validation of dropdown Listbox

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com