HTML DOM Select disabled Property - ड्रॉप-डाउन को सक्षम/अक्षम करें

HTML DOM Select disabled Property

HTML DOM select disabled property किसी HTML दस्तावेज़ में ड्रॉप-डाउन सूची के अक्षम (disabled) या सक्षम (enabled) स्थिति को प्राप्त या सेट करता है। जब ड्रॉप-डाउन अक्षम होता है, तो उपयोगकर्ता उससे इंटरैक्ट नहीं कर सकता।

Syntax

Disabled स्थिति प्राप्त करना:

selectObject.disabled

Disabled स्थिति सेट करना:

selectObject.disabled = true | false

उदाहरण

नीचे दिए गए उदाहरण में हम एक ड्रॉप-डाउन बनाते हैं और बटन पर क्लिक करके उसे सक्षम/अक्षम करते हैं:

<!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 Select disabled Demo</h1>
<p>नमस्ते, अपना पसंदीदा विषय चुनें:</p>
<select class='drop-down'>
  <option>Physics</option>
  <option>Maths</option>
  <option>Chemistry</option>
  <option>English</option>
</select>
<button onclick="disEna()" class="btn">Disable/Enable</button>
<div class="show"></div>
<script>
  function disEna() {
    var dropDown = document.querySelector(".drop-down");
    var showMsg = document.querySelector(".show");
    showMsg.innerHTML = "";
    if (dropDown.disabled === true) {
      dropDown.disabled = false;
      showMsg.innerHTML = "पहले मैं अक्षम था, अब मैं सक्षम हूँ";
    } else {
      dropDown.disabled = true;
      showMsg.innerHTML = "पहले मैं सक्षम था, अब मैं अक्षम हूँ";
    }
  }
</script>
</body>
</html>

आउटपुट

पहली बार "Disable/Enable" बटन पर क्लिक करने पर ड्रॉप-डाउन अक्षम हो जाएगा। दूसरी बार क्लिक करने पर यह फिर से सक्षम हो जाएगा। अक्षम स्थिति में ड्रॉप-डाउन ग्रे दिखाई देता है और उपयोगकर्ता इससे इंटरैक्ट नहीं कर सकता।

मुख्य बिंदु

• disabled property boolean मान (true/false) स्वीकार करता है
• true सेट करने पर ड्रॉप-डाउन अक्षम हो जाता है
• false सेट करने पर ड्रॉप-डाउन सक्षम हो जाता है
• अक्षम ड्रॉप-डाउन फॉर्म सबमिशन में शामिल नहीं होता
• CSS में :disabled pseudo-class से स्टाइलिंग कर सकते हैं