HTML DOM Option disabled Property - विकल्प सक्षम/अक्षम करें

HTML DOM Option disabled Property

HTML DOM option disabled property ड्रॉप-डाउन सूची में किसी विकल्प (<option>) के अक्षम (disabled) या सक्षम (enabled) स्थिति को प्राप्त या संशोधित करती है। अक्षम विकल्प उपयोगकर्ता द्वारा चुना नहीं जा सकता।

Syntax

अक्षम स्थिति प्राप्त करना:

optionObject.disabled

अक्षम स्थिति सेट करना:

optionObject.disabled = true | false

उदाहरण

"Maths" विकल्प को अक्षम करना:

<!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>नमस्ते, अपना पसंदीदा विषय चुनें:</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">गणित अक्षम करें</button>
<div class="show"></div>
<script>
  function disMaths() {
    document.querySelector(".drop-down").options[1].disabled = true;
    document.querySelector(".show").innerHTML = "अब आप गणित विषय नहीं चुन सकते";
  }
</script>
</body>
</html>

आउटपुट

"गणित अक्षम करें" बटन पर क्लिक करने पर "Maths" विकल्प अक्षम हो जाता है (ग्रे दिखाई देता है) और उपयोगकर्ता इसे चुन नहीं सकता।

मुख्य बिंदु

• disabled property boolean मान (true/false) स्वीकार करता है
• true सेट करने पर विकल्प अक्षम हो जाता है - उपयोगकर्ता इसे चुन नहीं सकता
• false सेट करने पर विकल्प सक्षम हो जाता है
• HTML में disabled attribute उपस्थित होने पर डिफ़ॉल्ट रूप से true होता है
• select.options[index].disabled से विशिष्ट विकल्प को अक्षम/सक्षम कर सकते हैं
• शर्ती उपलब्धता के लिए उपयोगी (जैसे: स्टॉक में नहीं होने पर उत्पाद विकल्प अक्षम करें)