Pages

Friday, December 31, 2010

Enable or disable controls using js

Hi sometimes you may want to disable and enable controls using js. here i will explain how to do this.......
suppose you have these controls in you page which were currently disabled/readonly and our aim is to enable them using js


<input    id="myText"    name="myText"    readonly="" type="text">


 <select    disabled   id="mySelect"   name="mySelect">      ,br/><option value="value1">Value1</option>    
<option value="value2">Value2</option>    
<option value="value3">Value3</option>
</select>"

<input disabled="" id="myCheckbox" name="myCheckbox" type="checkbox" />

<input disabled="" id="myRadio" name="myRadio" type="radio" />

//and finally a button to change status of these controls
<input onclick="changestatus()" type="button" value="ChangeStatus" />

<script type="text/javascript">

 function changestatus()
{

document.getElementById("myText").removeAttribute("readonly",false);

document.getElementById("mySelect").removeAttribute("disabled",false);

document.getElementById("myCheckbox").removeAttribute("disabled",false);

document.getElementById("myRadio").removeAttribute("disabled",false);

}
</script>

Thats it once we click on the button ChangeStatus the status will be changed.
To do the reverse you may have to use setAttribute to set the status
eg:: document.getElementById("myText").setAtttribute("readonly",true);

No comments:

Post a Comment