Come disabilitare il pulsante HTML usando JavaScript?

Ho letto che puoi disabilitare (rendere fisicamente non cliccabile) un pulsante HTML semplicemente aggiungendo disableal suo tag, ma non come un attributo, come segue:

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

Poiché questa impostazione non è un attributo, come posso aggiungerla in modo dinamico tramite JavaScript per disabilitare un pulsante precedentemente abilitato?

Poiché questa impostazione non è un attributo

È un attributo

Alcuni attributi sono definiti come booleani, il che significa che puoi specificare il loro valore e lasciare fuori tutto il resto. cioè Invece di disabled = " disabled ", includi solo la parte in grassetto. In HTML 4, è necessario includere solo la parte in grassetto poiché la versione completa è contrassegnata come funzionalità con supporto limitato (anche se questo è meno vero ora di quando è stata scritta la specifica).

A partire da HTML 5, le regole sono cambiate e ora includi solo il nome e non il valore. Ciò non fa alcuna differenza pratica perché il nome e il valore sono gli stessi.

La proprietà DOM viene anche chiamata disableded è un valore booleano che accetta trueo false.

foo.disabled = true;

In teoria puoi anche foo.setAttribute('disabled', 'disabled');e foo.removeAttribute("disabled"), ma non mi fiderei di questo con le versioni precedenti di Internet Explorer (che sono notoriamente buggy quando si tratta di setAttribute).

disabilitare

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

abilitare

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

È un attributo, ma booleano (quindi non ha bisogno di un nome, solo di un valore - lo so, è strano). È possibile impostare l'equivalente della proprietà in Javascript:

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

Prova quanto segue:

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

Il modo ufficiale per impostare l' disabledattributo su un HTMLInputElementè questo:

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

Mentre la risposta di @ kaushar è sufficiente per abilitare e disabilitare un HTMLInputElement, ed è probabilmente preferibile per la compatibilità cross-browser a causa del bug storico di IE setAttribute, funziona solo perché le Elementproprietà shadowElement attributi . Se viene impostata una proprietà, il DOM utilizza il valore della proprietà per impostazione predefinita anziché il valore dell'attributo equivalente.

C'è una differenza molto importante tra proprietà e attributi. Un esempio di una HTMLInputElement proprietà vera è input.value, e di seguito dimostra come funziona l'ombreggiatura:

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

Questo è ciò che significa dire che le proprietà degli attributi ombra. Questo concetto si applica anche alle proprietà ereditate sulla prototypecatena:

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

Spero che ciò chiarisca qualsiasi confusione sulla differenza tra proprietà e attributi.

È ancora un attributo. Impostandolo su:

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

... è valido.

Se hai l'oggetto pulsante, chiamato b: b.disabled=false;

Penso che il modo migliore potrebbe essere:

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

Funziona bene su più browser.

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

Puoi comunque usare un attributo. Usa semplicemente l'attributo 'disabilitato' invece di 'valore'.