बटन
बटन को निष्क्रिय करना आसान है क्योंकि disabledएक बटन संपत्ति है जो ब्राउज़र द्वारा नियंत्रित की जाती है:
<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>
कस्टम jQuery फ़ंक्शन के साथ इन्हें अक्षम करने के लिए, आप बस इसका उपयोग करेंगे fn.extend():
// Disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
this.disabled = state;
});
}
});
// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);
// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);
JSFiddle विकलांग बटन और इनपुट डेमो ।
अन्यथा आप jQuery की prop()विधि का उपयोग करेंगे:
$('button').prop('disabled', true);
$('button').prop('disabled', false);
एंकर टैग
यह ध्यान देने योग्य है कि लंगर टैग के लिए disabledएक वैध संपत्ति नहीं है । इस कारण से, बूटस्ट्रैप अपने .btnतत्वों पर निम्नलिखित स्टाइल का उपयोग करता है :
.btn.disabled, .btn[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #333;
background-color: #E6E6E6;
}
ध्यान दें कि [disabled]संपत्ति को एक .disabledवर्ग के रूप में भी कैसे लक्षित किया जाता है । .disabledवर्ग क्या एक लंगर टैग विकलांग प्रदर्शित करने के लिए जरूरत है।
<a href="http://example.com" class="btn">My Link</a>
बेशक, यह क्लिक करने पर लिंक को कार्य करने से नहीं रोकेगा। उपरोक्त लिंक हमें http://example.com पर ले जाएगा । इसे रोकने के लिए, हम disabledकॉल करने के लिए कक्षा के साथ एंकर टैग को लक्षित करने के लिए jQuery कोड के एक साधारण टुकड़े में जोड़ सकते हैं event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
हम disabledकक्षा का उपयोग करके टॉगल कर सकते हैं toggleClass():
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
$this.toggleClass('disabled', state);
});
}
});
// Disabled with:
$('a').disable(true);
// Enabled with:
$('a').disable(false);
JSFiddle विकलांग लिंक डेमो ।
संयुक्त
फिर हम ऊपर दिए गए पिछले अक्षम फ़ंक्शन को विस्तारित कर सकते हैं कि हम किस प्रकार के तत्व का उपयोग करने की कोशिश कर रहे हैं is()। इस तरह हम toggleClass()अगर यह एक तत्व inputया buttonतत्व नहीं है, या disabledअगर यह है तो संपत्ति को टॉगल कर सकते हैं:
// Extended disable function
jQuery.fn.extend({
disable: function(state) {
return this.each(function() {
var $this = $(this);
if($this.is('input, button, textarea, select'))
this.disabled = state;
else
$this.toggleClass('disabled', state);
});
}
});
// Disabled on all:
$('input, button, a').disable(true);
// Enabled on all:
$('input, button, a').disable(false);
पूर्ण संयुक्त JSFiddle डेमो ।
यह आगे ध्यान देने योग्य है कि उपरोक्त फ़ंक्शन सभी इनपुट प्रकारों पर भी काम करेगा।
