jQuery के साथ input को कैसे निष्क्रिय और सक्रिय करें: पूर्ण गाइड

jQuery के साथ input को कैसे निष्क्रिय और सक्रिय करें? शुरुआती और उन्नत के लिए गाइड

एक स्थिति की कल्पना करें: आप एक रजिस्ट्रेशन फॉर्म बना रहे हैं, और जब तक उपयोगकर्ता देश का चयन नहीं करता, "शहर" फ़ील्ड ब्लॉक रहना चाहिए। या आपके पास एक ऑनलाइन स्टोर है, और "ऑर्डर दें" बटन तब तक निष्क्रिय है जब तक सहमति का चेकबॉक्स चिह्नित नहीं किया जाता। परिचित लगता है? यह कार्य किसी भी फ्रंटएंड डेवलपर के लिए रोज़मर्रा का काम है। और आज हम इसे सूक्ष्मदर्शी से जाँचेंगे।

प्रश्न "jQuery के साथ input को disable/enable करें?" Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है (हज़ारों व्यू और दर्जनों उत्तर)। और यह कोई संयोग नहीं है: स्पष्ट सादगी के पीछे कई ऐसे नुकसान छिपे हैं जिन पर शुरुआती ठोकर खाते हैं। इस गाइड में हम सिर्फ कोड नहीं दिखाएंगे - हम आपको jQuery-निंजा की तरह सोचना सिखाएंगे। चलिए शुरू करते हैं!

disabled के लिए .attr() का उपयोग क्यों नहीं करना चाहिए?

यदि आपने पहले ही समाधान गूगल किया है, तो आपने शायद $('input').attr('disabled', 'disabled'); जैसी पुरानी सलाह देखी होगी। यह jQuery 1.x के युग में काम करता था, लेकिन आज यह एक गलत रास्ता है। क्यों?

\n
• .attr() HTML एट्रीब्यूट के साथ काम करता है, जबकि .prop() DOM ऑब्जेक्ट के गुणों के साथ काम करता है।
\n
• एट्रीब्यूट disabled एक बूलियन गुण है जो true या false होना चाहिए, स्ट्रिंग नहीं।
\n
• .attr('disabled', false) का उपयोग करने पर jQuery केवल एट्रीब्यूट हटा सकता है, लेकिन हमेशा स्थिति को सही ढंग से रीसेट नहीं कर सकता।
\n

आधुनिक मानक .prop() का उपयोग करना है। इसे "हमारा पिता" की तरह याद रखें:

// input को निष्क्रिय करें\n$('#myInput').prop('disabled', true);\n\n// input को वापस सक्रिय करें\n$('#myInput').prop('disabled', false);

सरल है, है ना? लेकिन चलिए गहराई में जाते हैं।

बुनियादी उदाहरण: एक input को निष्क्रिय और सक्रिय करना

मान लीजिए, हमारे पास एक ईमेल इनपुट फ़ील्ड और एक ट्रिगर बटन है। हम चाहते हैं कि बटन दबाने पर फ़ील्ड ब्लॉक या अनब्लॉक हो जाए।

<input type="email" id="emailInput" placeholder="ईमेल दर्ज करें">\n<button id="toggleBtn">फ़ील्ड ब्लॉक करें</button>\n\n<script>\n$(document).ready(function() {\n    $('#toggleBtn').on('click', function() {\n        var $input = $('#emailInput');\n        var isDisabled = $input.prop('disabled');\n        \n        // स्थिति टॉगल करें\n        $input.prop('disabled', !isDisabled);\n        \n        // बटन का टेक्स्ट बदलें\n        $(this).text(isDisabled ? 'फ़ील्ड ब्लॉक करें' : 'फ़ील्ड अनब्लॉक करें');\n    });\n});\n</script>

ध्यान दें: हम $(document).ready() का उपयोग कर रहे हैं - यह सुनिश्चित करता है कि स्क्रिप्ट चलने से पहले DOM लोड हो गया है। इसके बिना आपका कोड तत्वों को नहीं ढूंढ पाएगा।

तत्वों के समूह के साथ कार्य करना: select, checkbox और textarea

विधि .prop() सार्वभौमिक है। यह न केवल <input> के साथ, बल्कि <select>, <textarea>, <button> और यहां तक कि तत्वों के पूरे सेट के साथ भी काम करता है।

एक साथ पूरे फॉर्म के सभी तत्वों को ब्लॉक करें

कल्पना करें कि सबमिट करने के बाद पूरे फॉर्म को ब्लॉक करना है ताकि उपयोगकर्ता डेटा न बदल सके:

<form id="myForm">\n    <input type="text" name="name" placeholder="नाम">\n    <input type="email" name="email" placeholder="ईमेल">\n    <select name="country">\n        <option value="">देश चुनें</option>\n        <option value="ru">रूस</option>\n        <option value="us">अमेरिका</option>\n    </select>\n    <button type="submit">सबमिट करें</button>\n</form>\n\n<script>\n// फॉर्म के अंदर सभी input, select और textarea को ब्लॉक करें\n$('#myForm').find('input, select, textarea, button').prop('disabled', true);\n</script>

इसे और अधिक सुरुचिपूर्ण बनाया जा सकता है: :input का उपयोग करें - यह एक jQuery स्यूडो-सेलेक्टर है जो सभी तत्वों का चयन करता है