Activer/désactiver un bouton en javascript

désactivé est un attribut Booléen, la simple présence de causes de l'élément à être désactivés, indépendamment de ce que la valeur de cet attribut est en réalité. C'est pourquoi vous êtes en mesure de désactiver l'élément en JavaScript en définissant l'attribut de true, vous pouvez le définir à quoi que ce soit (et c'est la raison pour laquelle lorsque vous le réglez à false il reste désactivé).

HTML:

<input type="button" value="I'm disabled" disabled="true">
<input type="button" value="I'm disabled" disabled="false">
<input type="button" value="I'm disabled" disabled="doesn't matter">
<input type="button" value="I'm disabled" disabled="">

Dans le code HTML, vous n'avez même pas besoin de définir une valeur pour l'attribut:

HTML:

<input type="button" value="I'm disabled" disabled>

Toutefois recommandé de convention avec les attributs Booléens (si vous ne souhaitez fournir une valeur pour l'attribut), de sorte que nous pouvons avoir une certaine cohérence entre les développeurs, est à définir leur égal à la valeur du nom de l'attribut lui-même. Donc, pour désactiver un élément en JavaScript, les conventions suivantes sont recommandées:

element.setAttribute("disabled", "disabled");

Par conséquent, pour permettre un élément, vous ne définissez pas la disabled attribut à une valeur quelconque, parce que, comme nous l'avons vu, ce sera juste désactivé, vous devez supprimer le disabled attribut complètement:

element.removeAttribute("disabled");

JS:

document.querySelector("input[type='button']").removeAttribute("disabled");

HTML:

<input type="button" value="I'm NOT disabled" disabled="disabled">

---

Maintenant, lorsque vous travaillez avec des objets DOM en JavaScript, il y a deux façons d'affecter l'état actuel d'un élément et il est important de comprendre les effets du travail avec ces deux techniques:

1. Travailler avec de l'élément HTML en cours de l'état (ce qui est fait avec
   setAttribute(), removeAttribute(), et getAttribute()).
2. Travailler avec l'élément DOM actuel état de l'Objet (ce qui est fait avec du JavaScript propriété qui représente l'état actuel de l'élément dans la mémoire.

Le plus important, le propriété valeur peut être différente de la attribut valeur. Cela peut être déroutant, mais le code HTML de l'état est ce que l'élément ressemble de l'extérieur et de la propriété de l'état est ce qui se passe vraiment à l'intérieur, comme vous pouvez en mettre un visage heureux sur de sorte que les gens qui vous regarde, vous pensez que votre heureux (le code HTML de l'état), mais vous pourriez effectivement être triste pour de vrai (la propriété de l'état).

Lorsque la propriété de l'état n'a pas été défini, l'attribut de l'état est tout ce qui compte et aura un contrôle total sur l'état de l'élément. Lorsque la propriété d'état est défini, il remplace ce que l'attribut de l'état et des contrôles de l'état réel de l'élément.

JS:

//Get a reference to the button
var btn = document.querySelector("[type=button]");

//Test what the current HTML state is:
console.log(btn.getAttribute("disabled"));

//Test what the current mapped property state is:
console.log(btn.disabled);

//Change the property state, which will override the HTML state and 
//and cause it to become enabled.
btn.disabled = false;

//Test what the current HTML state is:
console.log(btn.getAttribute("disabled"));  //null because property overrode HTML

//Test what the current mapped property value is:
console.log(btn.disabled);

HTML:

<input type="button" value="I'm disabled" disabled="disabled">

De MDN:

Pour permettre à l'élément de quitter cet attribut entièrement par opposition à
réglage de la valeur de false.

JS:

function getElement(elm){
    return document.getElementById(elm);
}

/*-------------FUNCTION TO DISABLE AN TEXT BOX------------------*/
function disable(elm){
    return getElement(elm).setAttribute("disabled", true);
}
//==============================================================//
/*--------------FUNCTION TO ENABLE AN TEXT BOX------------------*/
function enable(elm){
    return getElement(elm).removeAttribute("disabled");
}
//==============================================================//

function disableEnable(){
      if(getElement("button").disabled){
            enable("button");
            enable("input-button");
      }
      else{
            disable("button");
            disable("input-button");
      } 
}

HTML:

<button id="button">Button</button>
<input id="input-button" type="button" value="Input Button"/>

<br/><br/><br/>
<button onClick="disableEnable();"> Disable/Enable Buttons Above</button>