Ever wonder how to disable another input element through the use of another control? Here is a simple tutorial on how to toggle the disabled attribute of an input element.

For the first demo, we will toggle an input’s disabled status through the use of another control. For this example, we will give our target input an id of target, while our control, in this case a link, we will give it an id of control:

Target text field: <input type="text" id="target" /><br />
<a href="#" id="control" />Disable target</a>

Now to toggle the target‘s disabled status, it is actually quite simple in jQuery. Using the .attr() attribute we can disable the target. Then using the .removeAttr(), we can remove the disabled status. Here is how the javascript code would look like:

$("#control").toggle(
function ()
{
	$('#target').attr("disabled", true);
},
function ()
{
	$('#target').removeAttr("disabled");
});

Here is a demo on how to toggle the disabled status of an input:

Target text field:
Disable target

Although the first method is handy, there are times when we really don’t need a control input. What if we want to enable an input textbox just by clicking on it? Unfortunately Read more »