¿Cómo deshabilitar el botón HTML usando JavaScript?

He leído que puede deshabilitar (hacer físicamente imposible hacer clic) un botón HTML simplemente agregando disablesu etiqueta, pero no como un atributo, de la siguiente manera:

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

Dado que esta configuración no es un atributo, ¿cómo puedo agregar esto dinámicamente a través de JavaScript para deshabilitar un botón que estaba habilitado anteriormente?

Dado que esta configuración no es un atributo

Es un atributo

Algunos atributos se definen como booleanos, lo que significa que puede especificar su valor y dejar todo lo demás fuera. es decir, en lugar de disabled = " disabled ", incluye solo la parte en negrita. En HTML 4, debe incluir solo la parte en negrita ya que la versión completa está marcada como una característica con soporte limitado (aunque eso es menos cierto ahora que cuando se escribió la especificación).

A partir de HTML 5, las reglas han cambiado y ahora incluye solo el nombre y no el valor. Esto no hace una diferencia práctica porque el nombre y el valor son iguales.

La propiedad DOM también se llama disabledy es un valor booleano que toma trueo false.

foo.disabled = true;

En teoría, también puede foo.setAttribute('disabled', 'disabled');y foo.removeAttribute("disabled"), pero no confiaría en esto con versiones anteriores de Internet Explorer (que son notoriamente defectuosas en lo que respecta a setAttribute).

deshabilitar

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

para permitir

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

Es un atributo, pero uno booleano (por lo que no necesita un nombre, solo un valor, lo sé, es raro). Puede establecer la propiedad equivalente en Javascript:

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

Intenta lo siguiente:

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

La forma oficial de establecer el disabledatributo en un HTMLInputElementes esta:

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

Si bien la respuesta de @ kaushar es suficiente para habilitar y deshabilitar un HTMLInputElement, y probablemente sea preferible para la compatibilidad entre navegadores debido a la falla histórica de IE setAttribute, solo funciona porque las Elementpropiedades sombrean los Elementatributos. Si se establece una propiedad, el DOM usa el valor de la propiedad por defecto en lugar del valor del atributo equivalente.

Hay una diferencia muy importante entre propiedades y atributos. Un ejemplo de una HTMLInputElement propiedad verdadera es input.value, y a continuación se muestra cómo funciona el sombreado:

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

Eso es lo que significa decir que las propiedades sombrean los atributos. Este concepto también se aplica a las propiedades heredadas en la prototypecadena:

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 esto aclare cualquier confusión sobre la diferencia entre propiedades y atributos.

Sigue siendo un atributo. Ajustándolo a:

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

... es válido.

Si tiene el objeto botón, llamado b: b.disabled=false;

Creo que la mejor manera podría ser:

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

Funciona bien entre navegadores.

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

Todavía puedes usar un atributo. Simplemente use el atributo 'deshabilitado' en lugar de 'valor'.