HTML DOM Option disabled Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM option disabled property returns and modify whether the option element is disabled or not.

Syntax

Following is the syntax −

  • 1. Returning disabled

object.disabled
  • 2. Modifying disabled

object.disabled = true | false

Example

Let us see an example of HTML DOM option disabled property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   .drop-down{
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Option disabled Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="disMaths()" class="btn">Disable Maths</button>
<div class="show"></div>
<script>
   function disMaths() {
      document.querySelector(".drop-down").options[1].disabled=true;
      document.querySelector(".show").innerHTML="Now you can't select Maths subject";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Disable Maths” button to disable maths and then try to select maths subject.

raja
Published on 19-Jul-2019 12:39:35
Advertisements