Comment désactiver le bouton HTML en utilisant JavaScript?

J'ai lu que vous pouvez désactiver (rendre physiquement non cliquable) un bouton HTML simplement en l'ajoutant disableà sa balise, mais pas en tant qu'attribut, comme suit:

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

Étant donné que ce paramètre n'est pas un attribut, comment puis-je l'ajouter de manière dynamique via JavaScript pour désactiver un bouton précédemment activé?

Étant donné que ce paramètre n'est pas un attribut

C'est un attribut.

Certains attributs sont définis comme booléens, ce qui signifie que vous pouvez spécifier leur valeur et laisser tout le reste de côté. c'est-à-dire qu'au lieu de disabled = " disabled ", vous incluez uniquement la partie en gras. En HTML 4, vous ne devez inclure que la partie en gras car la version complète est marquée comme une fonctionnalité avec un support limité (bien que cela soit moins vrai maintenant que lorsque la spécification a été écrite).

Depuis HTML 5, les règles ont changé et maintenant vous n'incluez que le nom et non la valeur. Cela ne fait aucune différence pratique car le nom et la valeur sont identiques.

La propriété DOM est également appelée disabledet est un booléen qui prend trueou false.

foo.disabled = true;

En théorie, vous pouvez aussi foo.setAttribute('disabled', 'disabled');et foo.removeAttribute("disabled"), mais je ne ferais pas confiance à cela avec les anciennes versions d'Internet Explorer (qui sont notoirement boguées en ce qui concerne setAttribute).

désactiver

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

autoriser

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

C'est un attribut, mais booléen (donc il n'a pas besoin d'un nom, juste une valeur - je sais, c'est bizarre). Vous pouvez définir la propriété équivalente en Javascript:

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

Essayez ce qui suit:

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

La façon officielle de définir l' disabledattribut sur un HTMLInputElementest la suivante:

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

Bien que la réponse de @ kaushar soit suffisante pour activer et désactiver un HTMLInputElement, et est probablement préférable pour la compatibilité entre navigateurs en raison du buggy historique d'IE setAttribute, cela ne fonctionne que parce que les Elementpropriétés masquent les Elementattributs. Si une propriété est définie, le DOM utilise la valeur de la propriété par défaut plutôt que la valeur de l'attribut équivalent.

Il existe une différence très importante entre les propriétés et les attributs. Un exemple de HTMLInputElement propriété vraie est input.value, et ci-dessous montre comment fonctionne l'observation:

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

C'est ce que signifie dire que les propriétés ombragent les attributs. Ce concept s'applique également aux propriétés héritées de la prototypechaîne:

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

J'espère que cela clarifie toute confusion sur la différence entre les propriétés et les attributs.

C'est toujours un attribut. Réglez-le sur:

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

... est valable.

Si vous avez l'objet bouton, appelé b: b.disabled=false;

Je pense que le meilleur moyen pourrait être:

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

Cela fonctionne bien entre les navigateurs.

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

Vous pouvez toujours utiliser un attribut. Utilisez simplement l'attribut «désactivé» au lieu de «valeur».