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>

 

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

  1. Jorge Torres says:

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

  2. Lisa Perkins says:

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

  3. Hasmukh says:

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

  4. Mark says:

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

  5. Tiago Rigo says:

    very nice example!
    You solved my problem with disabling radio button and struts tags!
    thank you!

  6. Alex says:

    extremly good example. thank you!

  7. ixiel says:

    You are like NEO in the matrix world! Thank you!

  8. protected void Page_Load(object sender, EventArgs e)
    {
    if (SelectUnit.Checked == true)
    {
    UnitDdl.Enabled = true;

    CmdDdl.Enabled = false;
    TypeDdl.Enabled = false;

    }
    if (SelectCommand.Checked == true)
    {

    UnitDdl.Enabled = false;

    CmdDdl.Enabled = true;
    TypeDdl.Enabled = true;

    }
    }

  9. charlie says:

    this topic is very useful.it’s just barely simple to understand.thank you for sharing this

  10. Swapna says:

    Really good and a very useful info