HTML disabled एट्रिब्यूट: एलिमेंट अक्षम करना

HTML disabled एट्रिब्यूट

disabled एट्रिब्यूट एक बूलियन एट्रिब्यूट है जो फॉर्म एलिमेंट्स को अक्षम (disable) करता है। अक्षम एलिमेंट: फोकस प्राप्त नहीं कर सकता, क्लिक नहीं किया जा सकता, फॉर्म सबमिशन में शामिल नहीं होता, और आमतौर पर ग्रे आउट दिखाई देता है।

लागू एलिमेंट्स

<button>, <textarea>, <optgroup>, <select>, <fieldset>, <input>, <option>

सिंटैक्स

<element disabled>
<element disabled="disabled">  <!-- XHTML स्टाइल -->

उदाहरण: इनपुट फील्ड अक्षम करना

<!DOCTYPE html>
<html>
<body>
  <h2>विवरण</h2>
  <form>
    <p>ये नए विवरण हैं...</p>
    <fieldset>
      <legend>नए विवरण:</legend>
      खिलाड़ी: <input type="text" disabled><br>
      रैंक: <input type="number"><br>
      ईमेल: <input type="email"><br>
      रिपोर्टिंग समय: <input type="time">
    </fieldset>
  </form>
</body>
</html>

आउटपुट

"खिलाड़ी" इनपुट फील्ड अक्षम (ग्रे आउट) दिखाई देगा, उपयोगकर्ता उसमें टाइप नहीं कर सकता।

disabled vs readonly

विशेषता	disabled	readonly
संपादन	नहीं	नहीं
फोकस	नहीं	हाँ
टैब नेविगेशन	नहीं	हाँ
फॉर्म सबमिशन	नहीं भेजा जाता	भेजा जाता है
लागू एलिमेंट्स	फॉर्म एलिमेंट्स	केवल input/textarea
डिफ़ॉल्ट स्टाइल	ग्रे आउट	सामान्य

fieldset disabled

<fieldset disabled> इसके अंदर सभी फॉर्म कंट्रोल्स को अक्षम कर देता है (legend के अलावा)।

CSS स्टाइलिंग

:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

:disabled + label {
  color: #999;
}

JavaScript

// अक्षम करें
input.disabled = true;

// सक्षम करें
input.disabled = false;

// जांचें
if (input.disabled) { ... }