You are here: Reference > JavaScript > client-side > HTML DOM > properties > disabled

disabled property

A A

Font size

Browser support:

Sets or retrieves 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 property in Internet Explorer. In Opera, Firefox and Safari, only the form controls support this attribute. Another difference is that a disabled element is unselectable in Opera, Firefox and Safari, while it can be selected in Internet Explorer.

You must set the unselectable property 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 property instead of the disabled property.

Syntax:

object.disabled;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: DISABLED

Possible values:

Boolean that indicates the object state.

One of the following values:

false

Object is not disabled.

true

Object is disabled.

Default: false.

Example HTML code 1:

This example illustrates the use of the disabled attribute for anchors:

<a id="myAnchor" disabled="disabled">apple pear peach</a>

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 property:

<head>
    <script>
        function ToggleDisabled () {
            var anchor = document.getElementById ("myAnchor");

            if (anchor.disabled !== undefined) {
                anchor.disabled = !anchor.disabled;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <a id="myAnchor" disabled="disabled">apple pear peach</a>
    <button onClick="ToggleDisabled ();">Change disabled state!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

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

<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 4:

The next example shows a cross-browser solution to add disable functionality in Internet Explorer to all selected option elements with JavaScript. Note: this code doesn't work if multiple selection is enabled.

<head>
    <script>
        function InitDisabled () {
            // Internet Explorer only
            if (window.navigator.appName.toLowerCase () == "microsoft internet explorer") {
                var selects = document.getElementsByTagName ("select");
                window.current_select = new Array ();
                for (var i=0; i < selects.length; i++) {
                    InitSelectedArray (selects[i]);
                    selects[i].attachEvent ("onchange", SetDisabledStates);
                }
            }
        }

        function InitSelectedArray (select) {
            window.current_select[select] = new Array ();
            var options = select.options;
            for (var i=0; i < options.length; i++) {
                if (options[i].selected) {
                    window.current_select[select].push (i);
                }
                if (options[i].disabled) {
                    options[i].style.color = "#CCCCCC";
                }
            }
        }

        function SetDisabledStates () {
            var elem = event.srcElement;
            if (elem.selectedIndex && elem.options[elem.selectedIndex].disabled) {
                if (window.current_select[elem].length) {
                    elem.options[window.current_select[elem]].selected = true;
                } else {
                    elem.options[0].selected = true;
                }
            } else {
                InitSelectedArray (elem);
            }
        }
    </script>
</head>
<body onload="InitDisabled ();">

    <select size="10" id="barack">
        <option />active
        <option disabled="disabled" />disabled
        <option />active
        <option />active
        <option disabled="disabled" />disabled
        <option />active
        <option disabled="disabled" />disabled
        <option />active
    </select>

</body>