Enable Disable Radio button Text box in JavaScript
December 18th, 2008Disable 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>
