Enable Disable Radio button Text box in JavaScript

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>
Bookmark  

 

5 Responses to “Enable Disable Radio button Text box in JavaScript”

  1. Jorge Torres says:
    January 23, 2009 at 6:02 am

    Very nice Demo indeed. This is exactly what I was looking for. Thanx!

  2. Lisa Perkins says:
    March 26, 2009 at 1:03 am

    Thank you so much for sharing this. It helped tremendously!

  3. Millicent says:
    July 28, 2009 at 1:14 am

    Thank you.

  4. Hasmukh says:
    October 1, 2009 at 12:11 pm

    For html controls its works fine, but i need it in asp.net , i am not able to convert it can anyone help
    thanks

  5. Mark says:
    November 18, 2009 at 5:19 am

    How do you implement it on a nested type of form?

Leave a Reply

Security Code:

 

  Random Post