In order to access this site you need to enable JavaScript!

You are here: Reference > HTML > attributes > DISABLED

DISABLED attribute

Browser support:

Sets the state of an object for user interaction.

Disabled elements cannot have focus, do not receive or fire mouse events, cannot receive user input. Disabled elements are rendered in gray by default in browsers.

All HTML elements that can have a direct or indirect effect on the visual appearance of the page, support the DISABLED attribute in Internet Explorer (except the option and optGroup elements before version 8). In Opera, Firefox, Google Chrome and Safari, only the form controls support this attribute. Another difference is that a disabled element is unselectable in Opera, Firefox, Google Chrome and Safari, while it can be selected in Internet Explorer. You must set the unSelectable attribute to 'on' to get this functionality in Internet Explorer.

If you only want to prevent the contents of the object from being changed, use the READONLY attribute instead of the DISABLED attribute.

JavaScript page for this attribute: disabled. You can find other example(s) there.

Possible values:

This attribute has no values.
Specifying the DISABLED attribute with an arbitrary value has the same effect as specifying it with no value.
For example, all of the following declarations have the same effect: disabled, disabled="true", disabled="false", disabled="on", disabled="disabled".
Although Boolean attributes may be used with no value in HTML, for XHTML compatibility, always use the DISABLED attribute in the following format: disabled="disabled".

Example HTML code 1:

This example illustrates the use of the disabled attribute for input:text elements:

<input type="text" value="Disabled value" disabled="disabled" />
    <br /><br />
    <input type="text" value="Enabled value" />

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the disabled attribute for options (does not work in Internet Explorer before version 8):

<select multiple="multiple" size="4">
    <option selected="selected">Component_1</option>
    <option>Component_2</option>
    <option disabled="disabled">Component_3</option>
    <option>Component_4</option>
    <option>Component_5</option>
</select>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to create disabled options in Internet Explorer before version 8.

<head>
<!-- Conditional comment, parsed in Internet Explorer versions lower than 8 -->
<!--[if lt IE 8]> 
    <style>
        .disabledOption {
            color: #cccccc;
        }
    </style>
    <script type="text/javascript">
        function InitDropList () {
            var select = document.getElementById ("mySelect");
            select.attachEvent ("onchange", function () {return OnSelectionChanged (select)});
            select.savedSelIdx = select.selectedIndex;
        }

        function OnSelectionChanged (select) {
            var selOption = select.options[select.selectedIndex];
            if (selOption.disabled) {
                select.selectedIndex = select.savedSelIdx;
            }
            else {
                select.savedSelIdx = select.selectedIndex;
            }
        }
    </script>
<![endif]-->
    <script type="text/javascript">
        function Init () {
            if (window.InitDropList) {  // in Internet Explorer before version 8
                InitDropList ();
            }
        }
    </script>
</head>
<body onload="Init ();">
    <select size="10" id="mySelect">
        <option />enabled
        <option class="disabledOption" disabled="disabled" />disabled
        <option />enabled
        <option />enabled
        <option class="disabledOption" disabled="disabled" />disabled
        <option />enabled
        <option class="disabledOption" disabled="disabled" />disabled
        <option />enabled
    </select>
</body>