Navigation ( archives ›› 2006 ›› May ›› 29 ›› How to disable form elements )

How to disable form elements

Posted on May 29, 2006, 1:52 am EST

Many people told me, how to disable HTML elements. So I decided to write up a simple tutorial on how to do so.

Lets look at the following code...

  <title>Testing Disabled Toggle</title>
<script type="text/javascript">
  function testToggle() {
    document.getElementById('test').disabled = !document.getElementById('test').disabled;
<form method="get" action="">
  <label for="test">Test Input</label><input type="text" id="test" name"test" value="" />
  <input type="button" name="testpush" value="Toggle" onclick="testToggle();"/>

Notice that document.getElementByID(PARAM1) actually locates the current document the element with an id of that value of PARAM1.

Someone might argue that what if there are more than 1 ID. Thats a good question. But an ID in CSS means unique identifier. There can only be ONE instance of that identifier. So there can never be an instance where you have more than one.

Once we captured document.getElementByID(PARAM1), there are some fields that it can access. One of them is disabled. When I mean fields, I mean it could access any field that tag element can accept. So in our case we are using disabled.

Finally, the document.getElementById('test').disabled is a boolean value, if its true we make it false by negating it. We negate it by placing a ! as shown.

So here we have it, a simple working disabled toggle for form elements. It can be used for anything you desire.

About this Article:

Comments (0) - Add yours, or View the replies

Categoy (Javascript)

Views (5746)

Digg it: Digg this article