जावास्क्रिप्ट का उपयोग करके HTML बटन को कैसे निष्क्रिय करें?

Question

मैंने पढ़ा है कि आप एक HTML बटन को निष्क्रिय कर सकते हैं (बस शारीरिक रूप से अशुभ बटन) disableइसके टैग से जोड़कर , लेकिन एक विशेषता के रूप में नहीं, जैसा कि:

<input type="button" name=myButton value="disable" disabled>

चूँकि यह सेटिंग एक विशेषता नहीं है, इसलिए मैं इसे जावास्क्रिप्ट के माध्यम से गतिशील रूप से जोड़कर पहले से सक्षम बटन को निष्क्रिय कर सकता हूं?

Answer 1

चूंकि यह सेटिंग एक विशेषता नहीं है

यह एक विशेषता है।

कुछ विशेषताओं को बूलियन के रूप में परिभाषित किया गया है, जिसका अर्थ है कि आप उनके मूल्य को निर्दिष्ट कर सकते हैं और बाकी सब कुछ छोड़ सकते हैं। यानी अक्षम = " अक्षम " के बजाय , आप केवल बोल्ड भाग को शामिल करते हैं। HTML 4 में, आपको केवल बोल्ड भाग को शामिल करना चाहिए क्योंकि पूर्ण संस्करण को सीमित समर्थन के साथ एक विशेषता के रूप में चिह्नित किया गया है (हालांकि यह अब कम सच है जब कल्पना लिखी गई थी)।

HTML 5 के रूप में, नियम बदल गए हैं और अब आप केवल नाम शामिल करते हैं, न कि मान। इससे कोई व्यावहारिक अंतर नहीं पड़ता क्योंकि नाम और मूल्य समान हैं।

डोम संपत्ति भी कहा जाता है disabledऔर एक बूलियन कि लेता है trueया false।

foo.disabled = true;

सिद्धांत रूप में आप भी कर सकते हैं foo.setAttribute('disabled', 'disabled');और foo.removeAttribute("disabled"), लेकिन मैं इंटरनेट एक्सप्लोरर के पुराने संस्करणों के साथ इस पर भरोसा नहीं करूंगा (जो कि जब यह आता है तो कुख्यात छोटी गाड़ी है setAttribute)।

Comments

क्या यह दोनों करने के लिए समझ में आएगा, संपत्ति को बदलना और विशेषता सेट करना या क्या यह सिर्फ एक ओवरकिल है?

— v010dya

इसमें क्या fooहै foo.disabled = true;? क्या यह उस बटन का आईडी है?

— ढेर

@stack - आपके द्वारा पसंद किए गए किसी भी माध्यम के माध्यम से एकत्र किए गए तत्व के संदर्भ में एक चर (उदाहरण के लिए क्वेरीसेलर)

— क्वेंटिन

Answer 2

निष्क्रिय करने के लिए

document.getElementById("btnPlaceOrder").disabled = true; 

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

document.getElementById("btnPlaceOrder").disabled = false; 

Comments

किसी कारण के लिए यह मेरे लिए काम किया, भले ही $('#btnPlaceOrder').disabled = false;नहीं करता है।

— लेविनिन्जा

मैं $('#btnPlaceOrder')[0].disabled = falsejquery चयनकर्ता के रूप में एक सरणी वापस करने लगता है। श्रग।

— चिल्ली

jquery! == जावास्क्रिप्ट। jquery एक सरणी-जैसा चयनकर्ता देता है।

— अनिलरेडशिफ्ट

@levininja, Chilly - $ ('# btnPlaceOrder')। प्रोप ('अक्षम', गलत);

— डोमिनिक स्पेट

Answer 3

यह एक विशेषता है, लेकिन एक बूलियन एक (इसलिए इसे एक नाम की आवश्यकता नहीं है, बस एक मूल्य है - मुझे पता है, यह अजीब है)। आप जावास्क्रिप्ट में संपत्ति के बराबर सेट कर सकते हैं:

document.getElementsByName("myButton")[0].disabled = true;

Comments

इसे एक मूल्य की आवश्यकता है, यह वह नाम है जिसकी आवश्यकता नहीं है। (अजीब बात है लेकिन सच है)।

— क्वेंटिन

@ दाविद: मुझे याद है कि पहले पढ़ना, तय था। यह वास्तव में अजीब है और शायद अधिक समझ में आता है अगर सिंटैक्स हाइलाइटर्स ने इसे सही ढंग से सम्मानित किया :-)

— एंडी ई

Answer 4

निम्नलिखित प्रयास करें:

document.getElementById("id").setAttribute("disabled", "disabled");

Comments

जैसा कि डेविड डोरवर्ड ने उल्लेख किया है , यह ठीक से क्रॉस-ब्राउज़र पर निर्भर नहीं किया जा सकता है और इसके बजाय संपत्ति के बराबर का उपयोग किया जाना चाहिए।

— एंडी ई

Answer 5

इस disabledपर विशेषता सेट करने का आधिकारिक तरीका HTMLInputElementयह है:

var input = document.querySelector('[name="myButton"]');
// Without querySelector API
// var input = document.getElementsByName('myButton').item(0);

// disable
input.setAttribute('disabled', true);
// enable
input.removeAttribute('disabled');

जबकि @ कौशर का उत्तर सक्षम और अक्षम करने के लिए पर्याप्त है HTMLInputElement, और शायद IE के ऐतिहासिक रूप से छोटी गाड़ी के कारण क्रॉस-ब्राउज़र संगतता के लिए बेहतर है setAttribute, यह केवल इसलिए काम करता है क्योंकि Elementगुण छाया Elementविशेषताएँ। यदि कोई संपत्ति सेट की जाती है, तो DOM बराबर विशेषता के मूल्य के बजाय डिफ़ॉल्ट रूप से संपत्ति के मूल्य का उपयोग करता है।

गुणों और विशेषताओं के बीच बहुत महत्वपूर्ण अंतर है। एक सच्ची HTMLInputElement संपत्ति का एक उदाहरण है input.value, और नीचे दिखाया गया है कि कैसे काम करता है:

var input = document.querySelector('#test');

// the attribute works as expected
console.log('old attribute:', input.getAttribute('value'));
// the property is equal to the attribute when the property is not explicitly set
console.log('old property:', input.value);

// change the input's value property
input.value = "My New Value";

// the attribute remains there because it still exists in the DOM markup
console.log('new attribute:', input.getAttribute('value'));
// but the property is equal to the set value due to the shadowing effect
console.log('new property:', input.value);

<input id="test" type="text" value="Hello World" />

कहने का मतलब यह है कि गुण छाया गुण कहते हैं। यह अवधारणा prototypeश्रृंखला में विरासत में मिली संपत्तियों पर भी लागू होती है :

function Parent() {
  this.property = 'ParentInstance';
}

Parent.prototype.property = 'ParentPrototype';

// ES5 inheritance
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

function Child() {
  // ES5 super()
  Parent.call(this);

  this.property = 'ChildInstance';
}

Child.prototype.property = 'ChildPrototype';

logChain('new Parent()');

log('-------------------------------');
logChain('Object.create(Parent.prototype)');

log('-----------');
logChain('new Child()');

log('------------------------------');
logChain('Object.create(Child.prototype)');

// below is for demonstration purposes
// don't ever actually use document.write(), eval(), or access __proto__
function log(value) {
  document.write(`<pre>${value}</pre>`);
}

function logChain(code) {
  log(code);

  var object = eval(code);

  do {
    log(`${object.constructor.name} ${object instanceof object.constructor ? 'instance' : 'prototype'} property: ${JSON.stringify(object.property)}`);
    
    object = object.__proto__;
  } while (object !== null);
}

मुझे उम्मीद है कि यह गुणों और विशेषताओं के बीच किसी भी भ्रम को स्पष्ट करता है।

Answer 6

यह अभी भी एक विशेषता है। इसे सेट करना:

<input type="button" name=myButton value="disable" disabled="disabled">

... यह सही है।

Comments

मान्य, लेकिन युक्ति कहती है कि वाक्य रचना से बचना चाहिए: w3.org/TR/html4/appendix/notes.html#hB.3.3

— क्वेंटिन

सभी ब्राउज़र अक्षम = "अक्षम" दिखते हैं, मुझे पता है कि युक्ति इसे टालने के लिए कहती है, लेकिन मुझे कभी भी विकलांग स्थापित करने में कोई समस्या नहीं हुई है = "अक्षम" या जाँची गई = "जाँच" या चयनित = "चयनित" ... बस डॉन ' t निष्क्रिय कर दिया = "सही" ... केवल कुछ ब्राउज़र पहचानेंगे कि

— Bob Fincheimer

स्पष्ट रूप से सभी ब्राउज़र इसका समर्थन नहीं करते हैं - अगर वे नहीं करते तो कल्पना इतनी स्पष्ट नहीं होती। वे अभी किसी भी अधिक सामान्य उपयोग में नहीं हैं।

— क्वेंटिन

BTW, प्रश्न कहता है "मैं इसे जावास्क्रिप्ट के माध्यम से गतिशील रूप से कैसे जोड़ सकता हूं"

— क्वेंटिन

ज़रूर, लेकिन सवाल यह है कि विकलांगों के बारे में बात करना एक विशेषता नहीं है। मेरा जवाब यह है कि आप इसे एक विशेषता के रूप में उपयोग कर सकते हैं। आप DOM प्रॉपर्टी का भी उपयोग कर सकते हैं।

— ओली

Answer 7

यदि आपके पास बटन ऑब्जेक्ट है, जिसे b कहा जाता है: b.disabled=false;

Answer 8

मुझे लगता है कि सबसे अच्छा तरीका हो सकता है:

$("#ctl00_ContentPlaceHolder1_btnPlaceOrder").attr('disabled', true);

यह ठीक क्रॉस-ब्राउज़र काम करता है।

Comments

यह होना चाहिए prop, नहीं attr।

— अंती हापाला

सवाल देशी js समाधान की तलाश में है

— behradkhodayar

Answer 9

<button disabled=true>text here</button>

आप अभी भी एक विशेषता का उपयोग कर सकते हैं। बस 'मान' के बजाय 'अक्षम' विशेषता का उपयोग करें।

Comments

यह disabled="disabled"या बस disabled। कोई भी स्ट्रिंग मान "disabled", सहित disabled="true"और के बराबर है disabled="false"।

— 14: