JQuery का उपयोग करके एक बटन को अक्षम कैसे करें

वेब एप्लिकेशन में बटन को अक्षम करने के कई कारण हैं। चाहे वह किसी उपयोगकर्ता को अपने शॉपिंग कार्ट में बेचे गए आइटम को जोड़ने से रोकने के लिए हो, या किसी क्रिया के बाद उपयोगकर्ता को एक बटन क्लिक करने की इजाजत नहीं दे रहा है, jQuery के पास सीधे बटन अक्षम करने का कोई तरीका नहीं है।

इसके बजाय, हम prop() . का उपयोग करते हैं विधि, पुस्तकालय में एक नया जोड़ — jQuery 1.6 में प्रदर्शित हो रहा है। इसे चयनित तत्वों के संपत्ति मूल्यों को पुनः प्राप्त करने के समाधान के रूप में पेश किया गया था। पहले, यह attr() . के साथ किया जाता था विधि, जो विशेषता मान पुनर्प्राप्त करती है।

विशेषता मान प्राप्त करने से संबंधित एक विधि होने के साथ-साथ संपत्ति मूल्यों को पुनः प्राप्त करने से कई बार अप्रत्याशित परिणाम प्राप्त होते हैं। JQuery 1.6 के अनुसार, prop() इस असमानता को दूर करने के लिए यह तरीका अपनाया गया। अपने उद्देश्यों के लिए, हम prop() . का उपयोग करेंगे हमारे बटनों को अक्षम करने के लिए क्योंकि "अक्षम" एक HTML बटन तत्व का एक गुण मान है।

यदि आप att() using का उपयोग करने के बारे में अधिक जानना चाहते हैं बनाम prop() , संक्षिप्त इतिहास और ट्यूटोरियल पढ़ें।

prop() jQuery सिंटेक्स

अब जबकि हमने prop() . का उपयोग क्यों और कैसे करना है, इस पर चर्चा कर ली है , हम वाक्य रचना पर एक नज़र डाल सकते हैं। याद रखें कि prop() सिर्फ एक और jQuery विधि है और इन विधियों को एक चयनित तत्व पर बुलाया जाता है - हमारे मामले में, एक बटन। आइए देखें कि हम "बीटीएन" आईडी वाले बटन को कैसे निष्क्रिय कर सकते हैं।

<button id='btn' type='submit'>
Button is Disabled
</button>

यह एचटीएमएल बटन प्रस्तुत करता है।

हमारा बटन रेंडर कर रहा है! अब हम jQuery prop() . का उपयोग करके "अक्षम" के गुण मान को सही पर सेट कर सकते हैं .

$('#btn').prop('disabled', true)

जैसा कि हम देख सकते हैं, prop() मान को एक स्ट्रिंग के रूप में स्वीकार करता है और हम दूसरे तर्क में बूलियन मान सेट करते हैं। बूलियन मान या तो सत्य या असत्य होते हैं। यहां एक गाइड है जो बूलियन का उपयोग करने के तरीके में गहराई से जाती है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

"अक्षम" संपत्ति को सत्य पर सेट करने के बाद, हम एक क्लिक न करने योग्य बटन प्रस्तुत करते हैं। अब जब हम वाक्य रचना को समझ गए हैं, तो आइए देखें कि हम इसका उपयोग क्यों और कब करना चाहते हैं। अगले भाग में, हम एक ऐसी ई-कॉमर्स साइट पर एक नज़र डालेंगे, जिसमें "बिक चुके?" की विशेषता वाले उत्पाद होंगे।

एक बटन को निष्क्रिय करने के लिए jQuery प्रोप () का उपयोग करना

इस उदाहरण में, हमारे पास एक शॉपिंग ऐप है जो उत्पाद के बिक जाने पर "कार्ट में जोड़ें" बटन को अक्षम कर देगा। इस उदाहरण के लिए, हम एक साधारण HTML बटन और एक

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

<button class='add' type='submit'>
Add to Cart
</button>

<div>

</div>

आइए देखें कि हमारा बटन कैसे प्रस्तुत किया गया।

अब, एक उत्पाद और एक कॉलबैक फ़ंक्शन बनाते हैं - एक फ़ंक्शन जिसे बाद में कॉल करने के लिए किसी अन्य फ़ंक्शन को पास किया जाता है - हमारे कार्ट को ऊपर

में प्रदर्शित करने के लिए। यदि उत्पाद बेचा जाता है, तो बटन अक्षम हो जाएगा।

const product = {
name: 'Jacket',
price: 50.00,
soldOut: false
}


$(document).ready(function() {
 $('button.add').click(function(event) {
   event.preventDefault()
   alert(JSON.stringify(product.soldOut))
   if (product.soldOut) {
   $('.add').prop('disabled', true)
   } else {
   $('div').append(product.name)
   }
 })
})

हमने उत्पाद नामक एक चर बनाया है जिसमें एक वस्तु है। ऑब्जेक्ट में नाम, मूल्य और बेचे गए गुण हैं। यदि बेची गई संपत्ति झूठी है, तो हमें अपनी जैकेट को हमारे

में प्रदर्शित होते हुए देखना चाहिए। कार्ट में जोड़ें पर क्लिक करें और देखें कि क्या होता है।

चूंकि हमारी बेची गई संपत्ति झूठी पर सेट है, इसलिए हमने अपने उत्पाद को

में प्रदर्शित किया। क्या होगा अगर वह स्टॉक में आखिरी जैकेट थी? आइए देखें कि क्या होता है जब बेची गई संपत्ति सत्य पर सेट होती है।

const product = {
name: 'Jacket',
price: 50.00,
soldOut: true
}

हम उम्मीद करते हैं कि कार्ट में जोड़ें बटन अब अक्षम हो जाएगा।

ठीक यही हम चाहते थे। कॉलबैक फ़ंक्शन में सशर्त विवरण का उपयोग करके, हम कार्ट में जोड़ें बटन को अक्षम करने में सक्षम थे। अब उपयोगकर्ता अपने कार्ट में बेचे गए आइटम नहीं जोड़ सकते हैं। हमने अपने ई-कॉमर्स ऐप में एक बड़े सिरदर्द से बचा लिया!

निष्कर्ष

JQuery के साथ HTML बटन को अक्षम करने का तरीका सीखने में, हमने पाया है कि ऐसा करने के लिए jQuery के पास कोई स्पष्ट विधि नहीं है। इसे हल करने के लिए, हमने prop() . का उपयोग किया बटन गुण "अक्षम" को सत्य पर सेट करने की विधि। फिर हमने एक उदाहरण देखा कि कैसे एक बटन को निष्क्रिय करना उपयोगी है।

वेब विकास में उपयोगकर्ता अनुभव का मार्गदर्शन करना आवश्यक है। इस गाइड में, हमने उपयोगकर्ता अनुभव को निर्देशित करने के लिए अक्षम करने वाले बटनों का उपयोग किया है। अन्वेषण करें कि कैसे एक बटन को अक्षम करने से आपके उपयोगकर्ता अनुभव को आपके अगले प्रोजेक्ट में निर्देशित करने में मदद मिल सकती है।