JavaScript kullanarak HTML düğmesini nasıl devre dışı bırakabilirim?

Bir HTML düğmesini yalnızca disableetiketine ekleyerek devre dışı bırakabileceğinizi (fiziksel olarak tıklanamaz hale getirebileceğinizi) okudum , ancak aşağıdaki gibi bir özellik olarak değil:

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

Bu ayar bir öznitelik olmadığından, daha önce etkinleştirilmiş bir düğmeyi devre dışı bırakmak için bunu JavaScript aracılığıyla nasıl dinamik olarak ekleyebilirim?

Bu ayar bir özellik olmadığından

Bu bir özelliktir.

Bazı özellikler boolean olarak tanımlanır, yani değerlerini belirtebilir ve diğer her şeyi dışarıda bırakabilirsiniz. ie devre dışı = " devre dışı " yerine, yalnızca kalın kısmı dahil edersiniz. HTML 4'te, tam sürüm sınırlı desteğe sahip bir özellik olarak işaretlendiğinden yalnızca kalın kısmı dahil etmelisiniz (bu, spesifikasyon yazıldığı zamandan daha az doğrudur).

HTML 5'ten itibaren kurallar değişti ve şimdi değeri değil, yalnızca adı dahil ediyorsunuz. Bu pratik bir fark yaratmaz çünkü isim ve değer aynıdır.

DOM özelliği de denir disabledve alan bir boolean trueya false.

foo.disabled = true;

Teorik olarak da yapabilirsiniz foo.setAttribute('disabled', 'disabled');ve foo.removeAttribute("disabled"), ancak Internet Explorer'ın eski sürümleriyle (buna gelince kötü niyetli adamcağız setAttribute) buna güvenmem .

devre dışı bırakmak

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

etkinleştirmek

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

Bu bir niteliktir, ama boole bir özelliktir (bu yüzden bir isme ihtiyaç duymaz, sadece bir değere sahiptir - Biliyorum, garip). Özellik eşdeğerini Javascript'te ayarlayabilirsiniz:

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

Takip etmeyi dene:

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

Özelliği disabledbirHTMLInputElement şudur:

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

@ Kaushar'ın yanıtı , bir etkinleştirmek ve devre dışı bırakmak için yeterli olsa da , IE'ninHTMLInputElement tarihsel olarak buggy olması nedeniyle tarayıcılar arası uyumluluk için muhtemelen tercih edilebilirsetAttribute , ancak yalnızca Elementözellikler gölge Elementnitelikleri nedeniyle çalışır . Bir özellik ayarlanmışsa, DOM, eşdeğer özelliğin değeri yerine varsayılan olarak özelliğin değerini kullanır.

Özellikler ve nitelikler arasında çok önemli bir fark vardır. Gerçek bir örneği HTMLInputElement özelliği olan input.valueve aşağıda nasıl gölgeleme çalıştığını gösterecektir:

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

Gölge niteliklerinin özellikleri olduğunu söylemek budur. Bu kavram, prototypezincirdeki kalıtsal özellikler için de geçerlidir :

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

Umarım bu özellik ve nitelikler arasındaki farkla ilgili herhangi bir karışıklığı açıklar.

Hala bir özellik. Ayarlama:

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

... geçerlidir.

B olarak adlandırılan düğme nesneniz varsa: b.disabled=false;

Bence en iyi yol şu olabilir:

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

İyi bir çapraz tarayıcı çalışır.

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

Yine de bir özellik kullanabilirsiniz. 'Değer' yerine 'devre dışı' özelliğini kullanın.