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

Question

$input.disabled = true;

या

$input.disabled = "disabled";

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

Comments

JQuery का उपयोग कर अक्षम विशेषता

— user2381114

मुझे डिपेंडेसन प्लगइन मिला, जो आपको उपयोगी लग सकता है

— ऑन शॉप

Answer 1

jQuery 1.6+

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

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

jQuery 1.5 और नीचे

.prop()समारोह में मौजूद नहीं है, लेकिन .attr()इसी तरह की है:

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

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

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

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

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

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

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

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

---

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

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

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

Comments

एक तरफ के रूप में, याद रखें कि, यदि आप सभी प्रपत्र इनपुट नियंत्रणों को अक्षम करना चाहते हैं - incl। चेकबॉक्स, रेडियो, टेक्सारैस, आदि - आपको चयन करना है ':input', न कि सिर्फ 'input'। बाद वाला केवल वास्तविक <इनपुट> तत्वों का चयन करता है।

— कॉर्नेल मैसन

@CornelMasson input,textarea,select,buttonकी तुलना में उपयोग करने के लिए थोड़ा बेहतर है :input- :inputएक चयनकर्ता के रूप में काफी अक्षम है क्योंकि इसे *प्रत्येक तत्व पर लूप का चयन करना पड़ता है और tagname द्वारा फ़िल्टर करना होता है - यदि आप 4 tagname चयनकर्ताओं को सीधे पास करते हैं तो यह MUU तेज है। इसके अलावा, :inputएक मानक सीएसएस चयनकर्ता, नहीं है इसलिए किसी भी निष्पादन लाभ से संभव हो रहे हैं querySelectorAllकर रहे हैं खो दिया है

— gnarf

क्या यह उपयोगकर्ता को इसे एक्सेस करने से रोकता है, या क्या यह वास्तव में इसे वेब अनुरोध से हटा देता है?

— OneChillDude

.removeProp("disabled")Chrome की तरह कुछ ब्राउज़रों के मामले में, @ThomasDavidBaker द्वारा बताया गया, "संपत्ति को पूरी तरह से हटाए जाने और फिर से नहीं जोड़े जाने" के मुद्दे का उपयोग करने के कारण, जबकि यह फ़ायरफ़ॉक्स जैसे कुछ पर ठीक काम कर रहा था। हमें यहां वास्तव में सावधान रहना चाहिए। .prop("disabled",false)इसके बजाय हमेशा उपयोग करें

— संदीपन नाथ

लंगर तत्वों को अक्षम करने के लिए न तो .prop या .attr पर्याप्त हैं; .prop 'नियंत्रण' को भी धूसर नहीं करेगा (.attr करता है, लेकिन href अभी भी सक्रिय है)। आपको एक क्लिक ईवेंट हैंडलर भी जोड़ना होगा जो कि कॉल को निवारण () कहता है।

— जेफ लोरी

Answer 2

बस नए सम्मेलनों और & # के लिए यह अनुकूलनीय आगे जा रहा है (जब तक कि ECMA6 (???) के साथ चीजें बहुत बदल नहीं जाती हैं:

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

तथा

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

Comments

Jikes! $(document).on('event_name', '#your_id', function() {...})इसके बजाय क्यों $('#your_id').on('event_name', function() {...})? जैसा कि jQuery .on () दस्तावेज़ीकरण में वर्णित है, पूर्व प्रतिनिधिमंडल का उपयोग करता है और उन सभी event_name घटनाओं को सुनता है documentजो मेल खाने के लिए बबल और चेक करते हैं #your_id। उत्तरार्द्ध विशेष रूप से $('#your_id')केवल घटनाओं को सुनता है और वह बेहतर होता है।

— पीटर वी। मॉर्क

किसी भी बिंदु पर DOM में सम्मिलित किए गए तत्वों के लिए पूर्व काम करता है, बाद में केवल उस क्षण में रहने वालों के लिए।

— crazymykl

@ crazymykl सही है लेकिन आपको अपने पेज पर पहले से मौजूद आईडी वाले तत्वों को नहीं जोड़ना चाहिए।

— सेपरहेम

Answer 3

    // 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-ith.html

Answer 4

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

या

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

Comments

बेशक jQuery के लिए पूछा गया प्रश्न और यह सादे जावास्क्रिप्ट में स्थिति बदल रहा है, लेकिन यह काम करता है।

— बेसिक 6

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

— cjsimon

लेकिन मुझे नहीं लगता कि हम यहाँ पर jquery का विश्वकोश बना रहे हैं, अगर कोई उत्तर काम करता है, तो यह अच्छा है

— सज्जाद शिराज़ी

Answer 5

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

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

Comments

हालांकि इसके काम करने लपेटकर आसान है, तो आप के लिए इस्तेमाल किया जाना चाहिए था propऔर नहीं attr के साथ disabledसंपत्ति इसे सही ढंग से काम करने के लिए (ऊपर jQuery 1.6 या कल्पना करते हुए)।

— कोडिंग

@TrueBlueAussie उपयोग करने के नकारात्मक पक्ष क्या है attr? मैं कुछ परियोजनाओं में उपरोक्त कोड का उपयोग करता हूं और जहां तक ​​मुझे याद है यह ठीक काम करता है

— निकु सर्डु

स्पष्ट अपवाद दृश्यों के पीछे गुणों के साथ नियंत्रण हैं। सबसे प्रसिद्ध एक checkedचेकबॉक्स की संपत्ति है। प्रयोग attrकरने से समान परिणाम नहीं मिलेगा।

— कोडिंग हो गई

Answer 6

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

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

Comments

धन्यवाद मुझे टॉगल के लिए एक ही बात है; $ ("इनपुट")। प्रोप ('अक्षम', फ़ंक्शन (i, v) {वापसी! v;});

— Floww

Answer 7

उनका उपयोग करने के कई तरीके हैं जिनसे आप किसी भी तत्व को सक्षम / अक्षम कर सकते हैं :

दृष्टिकोण १

$("#txtName").attr("disabled", true);

दृष्टिकोण २

$("#txtName").attr("disabled", "disabled");

यदि आप jQuery 1.7 या उच्चतर संस्करण का उपयोग कर रहे हैं, तो attr () के बजाय प्रोप () का उपयोग करें।

$("#txtName").prop("disabled", "disabled");

यदि आप किसी भी तत्व को सक्षम करना चाहते हैं, तो आपको बस इसके विपरीत करना होगा जो आपने इसे अक्षम करने के लिए किया था। हालाँकि jQuery किसी भी विशेषता को हटाने का एक और तरीका प्रदान करता है।

दृष्टिकोण १

$("#txtName").attr("disabled", false);

दृष्टिकोण २

$("#txtName").attr("disabled", "");

दृष्टिकोण ३

$("#txtName").removeAttr("disabled");

फिर, यदि आप jQuery 1.7 या उच्चतर संस्करण का उपयोग कर रहे हैं, तो attr () के बजाय प्रोप () का उपयोग करें। यानी कि। यह है कि आप jQuery का उपयोग करके किसी भी तत्व को कैसे सक्षम या अक्षम करते हैं।

Answer 8

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

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

"इनपुट-चेकबॉक्स" वर्ग के एक क्षेत्र को अक्षम करना

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

या कई तत्व

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

Comments

सवाल विशेष रूप से jQuery के बारे में पूछता है ... लेकिन समान रूप से आपका कथन सही है, और यह जानने के लायक है कि jQuery को इसके लिए उपयोग करने की आवश्यकता नहीं है जब कई तत्व हैं।

— एडीसन

Answer 9

आप फार्म के तत्व को निष्क्रिय या सक्षम करने के लिए jQuery प्रोप () विधि का उपयोग कर सकते हैं या गतिशील रूप से jQuery का उपयोग कर नियंत्रित कर सकते हैं। प्रोप () विधि को jQuery 1.6 और इसके बाद के संस्करण की आवश्यकता होती है।

उदाहरण:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

Answer 10

अक्षम:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

सक्षम करें:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

Answer 11

इनपुट प्रकार के लिए सही अक्षम करें:

एक विशिष्ट इनपुट प्रकार के मामले में ( पूर्व पाठ प्रकार इनपुट )

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

सभी प्रकार के इनपुट प्रकार के लिए

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

Comments

धन्यवाद इसने मुझे एक इनपुट नाम से अलग करने में मदद की। $("input[name=method]").prop('disabled', true);

— हैरी बोश

Answer 12

यह मेरे लिए काम करता है

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

Answer 13

मैंने @gnarf उत्तर का उपयोग किया और इसे फ़ंक्शन के रूप में जोड़ा

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

फिर इस तरह का उपयोग करें

$('#myElement').disable(true);

Answer 14

2018, JQuery के बिना (ES6)

सभी को अक्षम करें input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

के inputसाथ अक्षम करेंid="my-input"

document.getElementById('my-input').disabled = true;

सवाल JQuery के साथ है , यह सिर्फ FYI है।

Answer 15

दृष्टिकोण 4 (यह जंगली कोडर उत्तर का विस्तार है )

txtName.disabled=1     // 0 for enable

<input id="txtName">

Answer 16

इस तरह का उपयोग करें,

 $( "#id" ).prop( "disabled", true );

 $( "#id" ).prop( "disabled", false );

Answer 17

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

Comments

समीक्षा कतार से : मैं आपसे अनुरोध कर सकता हूं कि कृपया अपने उत्तर के आसपास कुछ और संदर्भ जोड़ दें। कोड-केवल उत्तर समझना मुश्किल है। यह पूछने वाले और भविष्य के पाठकों दोनों की मदद करेगा यदि आप अपनी पोस्ट में अधिक जानकारी जोड़ सकते हैं।

— आरबीटी

Answer 18

JQuery के मोबाइल में:

विकलांगों के लिए

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

सक्षम करने के लिए

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');