Come disabilitare un campo di input usando Javascript?

Question

Sto iniziando con JavaScript, ho scritto questa funzione:

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

che disabilita il secondo campo cantidadCopias nome se il primo è pieno.

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

Ma non disabilita il secondo campo quando il primo è pieno.

Answer 1

Hai guardato la console?

• Uncaught SyntaxError: imprevisto token)
• Uncaught ReferenceError: disableField non è definito

prima volta che hai avuto un errore di ortografia, ora il codice ha un extra )

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

Ora il prossimo numero è che non stai guardando la lunghezza del valore.

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

Quindi il codice dovrebbe essere simile

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

ma ora come è scritto, una volta che è disabilitato, non sarà riattivato.

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

Answer 2

il javascript:

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

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>​ 

si dovrebbe inoltre consentire di nuovo quando la lunghezza di ingresso è 0 di nuovo.

oltre a ciò è necessario agganciare onkeyup e non onkeydown.

si può provare qui: jsfiddle.net/DBJfN/

Answer 3

E 'meglio se si utilizza onkeyup() invece di onkeydown(). Il problema è che il valore dell'ingresso non viene aggiornato sull'evento 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 )? true:false; 
}