disabled attribute | disabled property

Sets or retrieves a value that indicates whether the user can interact with the object.

Syntax

HTML<element disabled="p" ... >
JavaScript

p = object.disabled

 

Property values

Type: Boolean

false (false)

Default. Element is not disabled.

true (true)

Element is disabled.

Remarks

When an element is disabled, it appears dimmed and does not respond to user input. Disabled elements do not respond to mouse events, nor will they respond to the contentEditable property.

If an element's disabled property is set to false but it is contained within a disabled element, it cannot override the disabled state of its container.

For link, style and styleSheet, the attribute sets or retrieves whether a style sheet is applied to the object.

Note  As of Windows Internet Explorer 9, the disabled property is supported for OPTGROUP and OPTION elements, but only for pages displayed in standards mode. These elements do not support the property in earlier versions of Windows Internet Explorer or for webpages displayed in earlier document modes.
 

Examples

The following example shows one way to enable and disable options in a dropdown list. Note that the example requires Internet Explorer 9 or later.

JavaScript
Copy 

<!DOCTYPE html>
<html>
<head>
    <title>Disabling Option and OptGroup elements</title>
</head>
<body>
    <label>What's your age? 
        <select>
            <optgroup label="Younger">
                <option>Infant (0-1)</option>
                <option>Toddler (1-3)</option>
                <option>Child (3-8)</option>
            </optgroup>
            <optgroup label="Older">
                <option>Young Adult (9-15)</option>
                <option>Teen (16-18)</option>
                <option>Adult (19-59)</option>
            </optgroup>
            <option>Senior (60+)</option>
        </select>
    </label>
    <sub>Age interpretations may vary.</sub>
    <button>Disable/enable the optgroup ('Younger')</button>
    <button>Disable/enable an option ('Toddler')</button>
    <script type="text/javascript">
        var buttons = document.querySelectorAll('button');
        buttons[0].addEventListener('click', function () { disableEnable(document.querySelector('optgroup')); });
        buttons[1].addEventListener('click', function () { disableEnable(document.querySelector('option:nth-child(2)')); });
        function disableEnable(elem) {
            if (elem.disabled)
                elem.disabled = false;
            else
                elem.disabled = true;
        }
    </script>
</body>
</html>

This example uses the disabled property to enable or disable a style object and a control.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/disabled.htm

JavaScript
Copy 

<style type="text/css" id="oStyle">
.styletest {
     background-color: black;
     color: white;
}
.styletest2 {
     background-color: black;
     color: red;
}
</style>
<script type="text/javascript">
function fnSwitch(){
     if(oTest.enablement=="enabled"){
          // Use an arbitrary attribute to track the status.
          oTest.enablement="disabled";
          oButton.value="Set disabled to false";
          oStyle.disabled=true;
          oDisableMe.disabled=true;
     }
     else{
          oButton.value="Set disabled to true";
          oTest.enablement="enabled";
          oStyle.disabled=false;
          oDisableMe.disabled=false;
     }
}
</script>
...     
     <p enablement="enabled" id="oTest" class="styletest">
     A paragraph of text.
          <input type="button" id="oDisableMe" class="styletest" value="Demonstration Button" onclick="alert('Demonstration button')">
     </p>
     <input type="button" id="oButton" value="Set disabled to true" onclick="fnSwitch()">

See also

button
input type=button
input type=checkbox
input type=email
input type=file
input type=image
input type=number
input type=password
input type=radio
input type=range
input type=reset
input type=search
input type=submit
input type=tel
input type=text
input type=url
link
optGroup
option
select
style
styleSheet
textArea
disabled

 

 

Show: