Working with disabled (the attribute)

Once again I was bitten by the manner in which the difference browsers report the value of the disabled attribute. I decided to test the different ways of using the disabled attributes and record my results.

When writing JavaScript I generally use the object.getAttribute("attributeName") syntax to get an attribute value. However, this will return very inconsistent results for the disabled attribute. What makes it even worse, is there is more than one way to specify the disabled attribute on an input element. In HTML 4.01 you should just add the keyword disabled. In XHTML 1.1 you must use disabled="disabled". You can also use this in HTML 4.01.

What I learned from all of my testing is:

  • Use disabled (HTML 4.01 only) or disabled=”disabled” (HTML or XHTML) to set in markup.
  • When setting via scripting use one of the following to disable and enable, respectively
    • inputObj.disabled=true and inputObj.disabled=false via boolean values;
    • inputObj.disabled=”disabled” and inputObject.disabled=”” via string values;
    • inputObj.setAttribute(“disabled”, “disabled”) and inputObj.removeAttribute(“disabled”)
  • When testing for the disabled attribute on an input element, use inputObject.disabled for consistent results between browers.

Full testing results are tablulated at Testing the Disabled Attribute.

About Becka11y

Web Accessibility Consultant with 30+ years in the software industry and 12+ years of direct accessibility innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *