Jak wyłączyć przycisk HTML za pomocą JavaScript?

Przeczytałem, że możesz wyłączyć (uczynić fizycznie niemożliwym do kliknięcia) przycisk HTML po prostu dodając disabledo jego znacznika, ale nie jako atrybut, w następujący sposób:

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

Ponieważ to ustawienie nie jest atrybutem, jak mogę dodać to dynamicznie za pomocą JavaScript, aby wyłączyć przycisk, który był wcześniej włączony?

Ponieważ to ustawienie nie jest atrybutem

To jest atrybut.

Niektóre atrybuty są zdefiniowane jako logiczne, co oznacza, że ​​możesz określić ich wartość i pominąć wszystko inne. tzn. Zamiast wyłączone = „ wyłączone ”, uwzględnisz tylko pogrubioną część. W HTML 4 powinieneś uwzględnić tylko pogrubioną część, ponieważ pełna wersja jest oznaczona jako funkcja z ograniczoną obsługą (chociaż jest to mniej prawdziwe teraz, kiedy napisano specyfikację).

Począwszy od HTML 5, reguły się zmieniły i teraz podajesz tylko nazwę, a nie wartość. Nie ma to praktycznej różnicy, ponieważ nazwa i wartość są takie same.

Nieruchomość DOM nazywana jest także disabledi to, że trwa logiczna truelub false.

foo.disabled = true;

Teoretycznie można również foo.setAttribute('disabled', 'disabled');a foo.removeAttribute("disabled"), ale nie ufam tym ze starszymi wersjami programu Internet Explorer (które są notorycznie buggy, jeśli chodzi o setAttribute).

wyłączyć

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

umożliwić

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

Jest to atrybut, ale boolowski (więc nie potrzebuje nazwy, tylko wartość - wiem, to dziwne). Możesz ustawić odpowiednik właściwości w JavaScript:

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

Spróbuj wykonać następujące czynności:

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

Oficjalny sposób ustawienia disabledatrybutu na HTMLInputElementto:

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

Chociaż odpowiedź @ kaushar jest wystarczająca do włączenia i wyłączenia HTMLInputElement, i prawdopodobnie jest lepsza dla kompatybilności z różnymi przeglądarkami z powodu historycznie błędnego IE setAttribute, działa tylko dlatego, że Elementwłaściwości Elementatrybutów shadow . Jeśli właściwość jest ustawiona, DOM używa domyślnie wartości właściwości, a nie wartości równoważnego atrybutu.

Istnieje bardzo ważna różnica między właściwościami a atrybutami. Przykładem prawdziwej HTMLInputElement właściwości jest input.value, a poniżej pokazuje, jak działa cieniowanie:

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

To znaczy powiedzieć, że właściwości atrybutów cienia. Ta koncepcja dotyczy również dziedziczonych właściwości prototypełańcucha:

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

Mam nadzieję, że to wyjaśnia wszelkie nieporozumienia dotyczące różnicy między właściwościami a atrybutami.

To wciąż atrybut. Ustawienie na:

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

... jest ważna.

Jeśli masz obiekt przycisku o nazwie b: b.disabled=false;

Myślę, że najlepszym sposobem może być:

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

Działa dobrze w różnych przeglądarkach.

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

Nadal możesz użyć atrybutu. Wystarczy użyć atrybutu „disabled” zamiast „value”.