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




html-input (9)

$input.disabled = true;

या

$input.disabled = "disabled";

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


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 () का उपयोग करें।

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


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

$.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();

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

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

तथा

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

<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>

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

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

उपयोग:

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

    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

कभी-कभी आपको इनपुट तत्व या टेक्स्टरेरा जैसे फॉर्म तत्व को अक्षम / सक्षम करने की आवश्यकता होती है। Jquery आपको "अक्षम" में अक्षम विशेषता सेट करने के साथ आसानी से इसे बनाने में मदद करता है। उदाहरण के लिए:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

अक्षम तत्व को सक्षम करने के लिए आपको इस तत्व से "अक्षम" विशेषता को हटाने या इसकी स्ट्रिंग को खाली करने की आवश्यकता है। उदाहरण के लिए:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

देखें: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html


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);

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

या

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




html-input