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

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

disabled property

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 (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 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 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 property for input:text elements:

<head>
    <script type="text/javascript">
        function ToggleDisabled () {
            var anchor = document.getElementById ("myText");

            if ('disabled' in anchor) {
                anchor.disabled = !anchor.disabled;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <input type="text" id="myText" disabled="disabled" value="Disabled value" />
    <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 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 4:

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>