जावास्क्रिप्ट का उपयोग करके इनपुट तत्व में अक्षम विशेषता जोड़ें


141

मेरे पास एक इनपुट बॉक्स है और मैं चाहता हूं कि इसे निष्क्रिय कर दिया जाए और साथ ही अपने फॉर्म को पोर्ट करते समय समस्याओं से बचने के लिए इसे छिपा दें।

अब तक मेरे पास अपना इनपुट छिपाने के लिए निम्नलिखित कोड है:

$(".shownextrow").click(function() { 
    $(this).closest("tr").next().show().find('.longboxsmall').hide();
});

यह इनपुट है जो एक परिणाम के रूप में छिपा हुआ है:

<input class="longboxsmall" type="text" />

मैं इनपुट में अक्षम विशेषता कैसे जोड़ सकता हूं?

जवाबों:


306

$("input").attr("disabled", true); जैसा कि ... मुझे कोई और जानकारी नहीं है।

यह दिसंबर 2013 है और मुझे वास्तव में पता नहीं है कि आपको क्या बताना है।

पहले यह हमेशा था .attr(), फिर यह हमेशा था.prop() , इसलिए मैं यहां वापस आया और उत्तर को अपडेट किया और इसे और अधिक सटीक बना दिया।

फिर एक साल बाद jQuery ने फिर से अपना विचार बदल दिया और मैं इस पर नज़र नहीं रखना चाहता।

लंबी कहानी संक्षेप में, फिलहाल, यह सबसे अच्छा जवाब है: "आप दोनों का उपयोग कर सकते हैं ... लेकिन यह निर्भर करता है।"

आपको इस उत्तर को इसके बजाय पढ़ना चाहिए: https://stackoverflow.com/a/5876747/257493

और उस परिवर्तन के लिए उनके जारी किए गए नोट यहां शामिल हैं:

मान प्राप्त करने / स्थापित करने के लिए न तो .attr () और न ही .prop () का उपयोग किया जाना चाहिए। इसके बजाय .val () विधि का उपयोग करें (हालाँकि .attr ("value", "somevalue") का उपयोग करना काम करना जारी रखेगा, जैसा कि उसने 1.6 से पहले किया था)।

पसंदीदा उपयोग का सारांश

.Prop () पद्धति का उपयोग बूलियन विशेषताओं / गुणों के लिए और उन गुणों के लिए किया जाना चाहिए जो HTML में मौजूद नहीं हैं (जैसे कि window.location)। अन्य सभी विशेषताएँ (जिन्हें आप html में देख सकते हैं) को .attr () विधि के साथ जोड़-तोड़ करते रहना चाहिए।

या दूसरे शब्दों में:

".prop = गैर-दस्तावेज़ सामग्री"

".attr" = दस्तावेज़ सामग्री

... ... ...

क्या हम सब यहाँ एपीआई स्थिरता के बारे में एक सबक सीख सकते हैं ...


3
+1 ध्यान देने के लिए अपडेट टेक्स्ट को मेरे लिए पर्याप्त बनाने के लिए
Vael Victus

@VaelVictus इतनी जल्दी नहीं। मुझे यह कहने के लिए खेद है कि मैंने इसे पोस्ट करने के एक साल बाद इसे फिर से बदल दिया है ... और मैं इस जवाब के बारे में भूल गया। इस उत्तर को पढ़ें: stackoverflow.com/a/5876747/257493
गुप्त

1
वह दस्तावेज़ / गैर-दस्तावेज़ विभेदीकरण .prop और .attr के बीच असीम रूप से सहायक होते हैं और मैंने पहले कभी भी इस तरह के रसीले तरीके से तैयार किए गए संदर्भ को नहीं देखा है। बहुत सराहना की!
unrivaledcreations

51

मेरे स्रोतों से कार्य कोड:

HTML दुनिया

<select name="select_from" disabled>...</select>

जेएस वर्ल्ड

var from = jQuery('select[name=select_from]');

//add disabled
from.attr('disabled', 'disabled');



//remove it
from.removeAttr("disabled");

2
Google से आने वाले लोगों के लिए एक नोट के रूप में, सीधे jQuery से :As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method
Erenor Paz

16

यदि आप jQuery का उपयोग कर रहे हैं तो अक्षम विशेषता को सेट करने के लिए कुछ अलग तरीके हैं।

var $element = $(...);
    $element.prop('disabled', true);
    $element.attr('disabled', true); 

    // The following do not require jQuery
    $element.get(0).disabled = true;
    $element.get(0).setAttribute('disabled', true);
    $element[0].disabled = true;
    $element[0].setAttribute('disabled', true);

किस बारे में $element.eq(0)[0].disabled = true;? :-P
qwertynl

1
हाँ, यह मेरे लिए उन्नत है, मैं उस प्रदर्शन को बेहतर बनाने के लिए दूर नहीं जाता।
इकोनॉर

+1। हालांकि यह थोड़ा बेमानी है। यदि आप तत्वों के एक नोडेलिस्ट / सरणी के साथ काम करने जा रहे हैं, तो यह मूर्खतापूर्ण है कि उन्हें इस तरह सूचकांक द्वारा चुना जाए। Iteration या केवल आपके द्वारा आवश्यक तत्व का चयन करने से अधिक समझ में आता है।

13
$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

उपरोक्त सभी पूरी तरह से मान्य समाधान हैं। वह चुनें जो आपकी आवश्यकताओं के अनुकूल हो।


1
JQuery की आवश्यकता नहीं है कि एक समाधान प्रदान करने के लिए धन्यवाद।
एलियास ज़मरिया

12

आप DOM एलिमेंट प्राप्त कर सकते हैं, और डिसेबल प्रॉपर्टी को सीधे सेट कर सकते हैं।

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').hide()[0].disabled = 'disabled';
});

या यदि एक से अधिक हैं, तो आप उन each()सभी को सेट करने के लिए उपयोग कर सकते हैं:

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() {
               this.style.display = 'none';
               this.disabled = 'disabled';
          });
});

5

बस jQuery की attr()विधि का उपयोग करें

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');

3
और विकलांग राज्य का उपयोग कर .removeAttr('disabled');
हटाएं

2

चूंकि सवाल पूछ रहा था कि जेएस के साथ यह कैसे किया जाए तो मैं एक वेनिला जेएस कार्यान्वयन प्रदान कर रहा हूं।

var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
  element.disabled = "disabled";
}

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.