Como desativar o botão HTML usando JavaScript?

Li que você pode desativar (tornar fisicamente impossível de clicar) um botão HTML simplesmente anexando disableà sua tag, mas não como um atributo, da seguinte maneira:

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

Como essa configuração não é um atributo, como posso adicioná-lo dinamicamente via JavaScript para desativar um botão que foi ativado anteriormente?

Como essa configuração não é um atributo

É um atributo.

Alguns atributos são definidos como booleanos, o que significa que você pode especificar seu valor e deixar todo o resto de fora. Em vez de desativado = " desativado ", você inclui apenas a parte em negrito. No HTML 4, você deve incluir apenas a parte em negrito, pois a versão completa é marcada como um recurso com suporte limitado (embora isso seja menos verdadeiro agora do que quando a especificação foi escrita).

No HTML 5, as regras foram alteradas e agora você inclui apenas o nome e não o valor. Isso não faz diferença prática, porque o nome e o valor são os mesmos.

A propriedade DOM também é chamada disablede é um booleano que leva trueor false.

foo.disabled = true;

Em teoria, você também pode foo.setAttribute('disabled', 'disabled');e foo.removeAttribute("disabled"), mas eu não confiaria nisso nas versões mais antigas do Internet Explorer (que são notoriamente problemáticas quando se trata setAttribute).

desabilitar

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

habilitar

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

É um atributo, mas é booleano (por isso não precisa de um nome, apenas de um valor - eu sei, é estranho). Você pode definir a propriedade equivalente em Javascript:

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

Tente o seguinte:

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

A maneira oficial de definir o disabledatributo em um 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');

Embora a resposta do @ kaushar seja suficiente para ativar e desativar um HTMLInputElement, e provavelmente seja preferível para compatibilidade entre navegadores devido ao histórico de bugs do IE setAttribute, ele só funciona porque as Elementpropriedades sombreamElement atributos. Se uma propriedade estiver configurada, o DOM usará o valor da propriedade por padrão, em vez do valor do atributo equivalente.

Há uma diferença muito importante entre propriedades e atributos. Um exemplo de uma HTMLInputElement propriedade true é input.valuee, abaixo, demonstra como o sombreamento funciona:

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

É isso que significa dizer que as propriedades sombreiam os atributos. Este conceito também se aplica às propriedades herdadas da prototypecadeia:

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

Espero que isso esclareça qualquer confusão sobre a diferença entre propriedades e atributos.

Ainda é um atributo. Configurando para:

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

... é válido.

Se você possui o objeto button, chamado b: b.disabled=false;

Eu acho que a melhor maneira poderia ser:

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

Funciona bem em vários navegadores.

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

Você ainda pode usar um atributo. Basta usar o atributo 'disabled' em vez de 'value'.