X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML DOM disabled Property

HTMLElement Object Reference Element Object

Definition and Usage

The disabled property sets or returns whether an element is disabled, or not.

A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.

Syntax

Set the disabled property:

HTMLElementObject.disabled=true|false

Return the disabled property:

HTMLElementObject.disabled


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The disabled property is supported in all major browsers.


Examples

Example 1

Disable HTML elements:

<html>
<head>
<script>
function disableElements()
{
document.getElementById("email").disabled=true;
document.getElementById("pwd").disabled=true;
document.getElementById("check1").disabled=true;
}
</script>
</head>
<body>

<form>
Email: <input type="text" id="email"><br>
Password: <input type="password" id="pwd"><br>
<input type="checkbox" id="check1">Do you like summer?
</form>

<button onclick="disableElements()">Disable fields</button>

</body>
</html>

Try it yourself »

Example 2

Disable a style sheet:

<html>
<head>
<link rel="stylesheet" type="text/css" id="style1" href="try_dom_link.css">
<script>
function disableStyle()
{
document.getElementById("style1").disabled=true
}
</script>
</head>
<body>

<button onclick="disableStyle()">Disable style sheet</button>

</body>
</html>

Try it yourself »

Example 3

Disable/Enable a dropdown list:

<html>
<head>
<script>
function disable()
  {
  document.getElementById("mySelect").disabled=true
  }
function enable()
  {
  document.getElementById("mySelect").disabled=false
  }
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>

<button type="button" onclick="disable()">Disable List</button>
<button type="button" onclick="enable()">Enable List</button>

</body>
</html>

Try it yourself »


HTMLElement Object Reference Element Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook