JavaScript List box disable or enable based on click of period button in a form

We can disable or enable a listbox by using its disabled property. Here is an example.

document.getElementById("l1").disabled=true;

Here we have given the id of l1 to our dropdown listbox. We can enable the listbox ( available for selecting element ) by changing the property to false.

document.getElementById("l1").disabled=false;

To learn this we will use one radio button and onclick of radio button we will execute one function radio_check() to change the property

Here is the demo of disabling listbox

Here is the code.

<html><head>
<title>Demo of JavaScript listbox disable or enable in a form</title>
<script type="text/javascript">
function radio_check()
{
if(document.drop_list.choice[1].checked){
document.getElementById("l1").disabled=true;
}else{
document.getElementById("l1").disabled=false;
}
}

function data_check()
{
var str=document.getElementById("l1").value;
if(str.length <=0){
alert("Please select one option ");
}else{
document.forms['drop_list'].submit();// working
}
}
</script>
</head>
<body>
<form name="drop_list" action="listbox-validation-demock.php" method="post" id='f1'>
Do you want to learn Web programming languages ? 
<input type=radio name=choice value='yes' onClick="radio_check()";>Yes
 <input type=radio name=choice value='no' onClick="radio_check()";>No 

<select name="Category" id="l1">
<option value=''>Select One</option>
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML with design">HTML</option>
<option value="Perl">Perl</option><option value="MySQL">MySQL</option></select>
<input onclick="data_check()"; value="Submit Form" type="button"> 

</form>
<br><br>
</body></html>

Subscribe to our YouTube Channel here

Disable or enable listbox inside a form

Subscribe