W3Schools.com

HTMLElement disabled Property

HTMLElement Object Reference HTMLElement 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 type="text/javascript">
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 type="text/javascript">
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 type="text/javascript">
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 HTMLElement Object
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE