javascript - JQuery के साथ इनपुट अक्षम/सक्षम करें?




html-input (8)

jQuery 1.6+

disabled संपत्ति को बदलने के disabled आपको .prop() फ़ंक्शन का उपयोग करना चाहिए।

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 और नीचे

.prop() फ़ंक्शन मौजूद नहीं है, लेकिन .attr() समान है:

अक्षम विशेषता सेट करें।

$("input").attr('disabled','disabled');

फिर से सक्षम करने के लिए, उचित विधि का उपयोग करना है .removeAttr()

$("input").removeAttr('disabled');

JQuery के किसी भी संस्करण में

आप हमेशा वास्तविक डीओएम ऑब्जेक्ट पर भरोसा कर सकते हैं और यदि आप केवल एक तत्व से निपट रहे हैं तो अन्य दो विकल्पों की तुलना में थोड़ा तेज़ है:

// assuming an event handler thus 'this'
this.disabled = true;

.prop() या .attr() विधियों का उपयोग करने का लाभ यह है कि आप चयनित आइटमों के समूह के लिए संपत्ति सेट कर सकते हैं।

नोट: 1.6 में एक .removeProp() विधि है जो removeAttr() तरह बहुत कुछ लगता है, लेकिन इसे removeAttr() गुणों जैसे 'disabled' दस्तावेज से removeAttr() नहीं किया जाना चाहिए :

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

वास्तव में, मुझे संदेह है कि इस विधि के लिए कई वैध उपयोग हैं, बूलियन प्रोप इस तरह से किए जाते हैं कि आपको उन्हें "हटाने" के बजाय उन्हें "हटाने" के बजाय झूठ में सेट करना चाहिए।

$input.disabled = true;

या

$input.disabled = "disabled";

मानक तरीका कौन सा है? और, इसके विपरीत, आप अक्षम इनपुट को कैसे सक्षम करते हैं?


2018 के लिए अपडेट करें:

अब jQuery की कोई आवश्यकता नहीं है और यह कुछ समय हो गया है क्योंकि document.querySelector या document.querySelectorAll (एकाधिक तत्वों के लिए) लगभग $ 1 जितना ही काम करता है, साथ ही अधिक स्पष्ट लोगों को प्राप्त होता है getElementById , getElementsByClassName , getElementsByTagName

"इनपुट-चेकबॉक्स" वर्ग के एक फ़ील्ड को अक्षम करना

document.querySelector('.input-checkbox').disabled = true;

या एकाधिक तत्व

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

आप इसे अपने कोड में कहीं भी वैश्विक डाल सकते हैं:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

और फिर आप सामान लिख सकते हैं जैसे:

$(".myInputs").enable();
$("#otherInput").disable();

उपयोग:

$("input[type=text]").attr('disabled', true);

यदि आप केवल वर्तमान स्थिति को उलटा करना चाहते हैं (जैसे टॉगल बटन व्यवहार):

$("input").prop('disabled', ! $("input").prop('disabled') );

सिर्फ नए सम्मेलनों के लिए और इसे अनुकूलित करने योग्य बनाने के लिए (जब तक कि ईसीएमए 6 (????) के साथ चीजें बड़े पैमाने पर परिवर्तित न हों:

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

तथा

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

$("input")[0].disabled = true;

या

$("input")[0].disabled = false;

<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>






html-input