web-dev-qa-db-fra.com

Comment désactiver un champ de saisie à l'aide de Javascript?

Je commence avec Javascript, j'ai écrit cette fonction:

function disableField() {
  if( document.getElementById("valorFinal").length > 0 ) ) {
    document.getElementById("cantidadCopias").disabled = true; 
  }
}

Ce qui désactive le second champ nommé cantidadCopias si le premier est rempli. 

<label> <span>Valor final:</span>
  <input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeydown="disableField()"/>
</label>
<label> <span>Cantidad de Copias:</span>
  <input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/>
</label>

Mais il ne s'agit pas de désactiver le deuxième champ lorsque le premier est rempli.

javascripthtmldisabled-input
14
JorgeeFG

Avez-vous regardé la console?

  • Uncaught SyntaxError: Jeton inattendu) 
  • Uncaught ReferenceError: disableField n'est pas défini

La première fois que vous avez eu une faute d'orthographe, votre code a maintenant un ) supplémentaire

function disableField() {
  if( document.getElementById("valorFinal").length > 0 ) ) {  <-- extra )
    document.getElementById("cantidadCopias").disabled = true; 
  }
}​

Le problème suivant est que vous ne regardez pas la longueur de la valeur. 

if( document.getElementById("valorFinal").length > 0 )  <-- you are looking at the length of the HTML DOM Node.

Donc, le code devrait ressembler à

function disableField() {
  if( document.getElementById("valorFinal").value.length > 0 ) { 
    document.getElementById("cantidadCopias").disabled = true; 
  }
}​

mais maintenant comment il est écrit, une fois qu'il est désactivé, il ne sera pas réactivé. 

function disableField() {
    var isDisabled = document.getElementById("valorFinal").value.length > 0; 
    document.getElementById("cantidadCopias").disabled = isDisabled;
}​
16
epascarello

Il vaut mieux utiliser onkeyup() au lieu de onkeydown(). Le problème est que la valeur de l'entrée n'est pas mise à jour lors de l'événement keydown.

Fiddle

<label> 
  <span>Valor final:</span>
  <input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeyup="disableField(this.value)"/>
 </label>
<label> 
  <span>Cantidad de Copias:</span>
  <input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/>
</label>

javascript

function disableField(val) {
    var cantidadCopias = document.getElementById("cantidadCopias");
    cantidadCopias.disabled = ( val.length > 0  );
}
2
Bob

le javascript:

var disableField = function () {
  var state = document.getElementById("valorFinal").value.length > 0;
  document.getElementById("cantidadCopias").disabled = state;
}​;​

le html:

<label> <span>Valor final:</span>
  <input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeyup="disableField()"/>
</label>
<label> <span>Cantidad de Copias:</span>
  <input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/>
</label>​

vous devez également l'activer à nouveau lorsque la longueur d'entrée est de nouveau à 0.

de plus, vous devez utiliser onkeyup et non onkeydown.

vous pouvez l'essayer ici: jsfiddle.net/DBJfN/

1
GottZ