JSP, Tomcat, JDBC, Projects

Enable Disable Radio button Text box in JavaScript

December 18th, 2008

Disable Radio button and text box in JavaScript by calling functions. This example will help to do enable form field and disable form field by onClick event. If web page required for searching pattern and only one option should enabled with all disabled, will help you. We are using disabled=true in JavaScript with field name.

Demo

<html>
<head>
<title>Enable Disable Radio button Text box in javascript</title>
</head>
<script>
 function chMd()
 {
  // initialize form with empty field
  document.forms[0].sTextBox.disabled=false;
  document.forms[0].sTextBox.value="";

  document.forms[0].eTextBox.disabled=false;
  document.forms[0].eTextBox.value="";

  document.forms[0].goServer.disabled=false;

  for(var i=0;i<document.forms[0].elements.length;i++)
  {
    if(document.forms[0].elements[i].name=="dOption")
    {
     if(document.forms[0].elements[i].value=="N")
     {
       if(document.forms[0].elements[i].checked==true){

        document.forms[0].sTextBox.disabled=true;
        document.forms[0].eTextBox.disabled=true;

        document.forms[0].sRadio[0].disabled=true;
        document.forms[0].sRadio[1].disabled=true;
        document.forms[0].sRadio[2].disabled=true;

        document.forms[0].goServer.disabled=true;
       }
     }
     else if(document.forms[0].elements[i].value=="T")
     {
       if(document.forms[0].elements[i].checked==true){
        document.forms[0].sTextBox.disabled=false;
        document.forms[0].eTextBox.disabled=false;

        document.forms[0].sRadio[0].disabled=true;
        document.forms[0].sRadio[1].disabled=true;
        document.forms[0].sRadio[2].disabled=true;

        document.forms[0].goServer.disabled=false;
       }
     }
     else if(document.forms[0].elements[i].value=="R")
     {
       if(document.forms[0].elements[i].checked==true){
        document.forms[0].sTextBox.disabled=true;
        document.forms[0].eTextBox.disabled=true;

        document.forms[0].sRadio[0].disabled=false;
        document.forms[0].sRadio[1].disabled=false;
        document.forms[0].sRadio[2].disabled=false;

        document.forms[0].goServer.disabled=false;
       }
     }
    }
  }
 }
</script>

<body>
<form name="fRadio">
  <input name="dOption" value="N" checked="checked" onClick="chMd()" type="radio">
   No Constraints <br />

    <input name="dOption" value="T" onClick="chMd()" type="radio"> Text Box 

    <input name="sTextBox" size="10"  disabled="disabled" type="text">
    <input name="eTextBox" size="10"  disabled="disabled" type="text"> <br/>

    <input name="dOption" value="R" onClick="chMd()" type="radio">  Radio Button
    Radio A  <input name="sRadio" value="A" disabled="disabled" type="radio">
    Radio B  <input name="sRadio" value="B" disabled="disabled" type="radio">
    Radio C  <input name="sRadio" value="C" disabled="disabled" type="radio"> <br/>
  <input name="goServer" value="Go" disabled="disabled" type="button">
  </form>
</body>
</html>