Jak wyłączyć pole wejściowe za pomocą JavaScript?

Question

Zaczynam JavaScript, napisałem tę funkcję:

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

co wyłącza drugie pole o nazwie cantidadCopias jeśli pierwszy jest wypełniony.

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

Ale nie wyłącza drugiego pola, gdy pierwszy jest wypełniony.

Answer 1

Czy patrzysz na konsolę?

• Uncaught SyntaxError: Nieoczekiwany token)
• Uncaught ReferenceError: disableField nie jest zdefiniowana

Pierwszy raz miałeś błąd ortograficzny, teraz Twój kod ma dodatkowy )

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

Teraz następnym problemem jest to, że nie patrzysz na długość wartości.

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

więc kod powinien wyglądać

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

ale teraz jak to jest napisane, gdy jest on wyłączony, to nie zostanie ponownie włączona.

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

Answer 2

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

należy również włączyć ją ponownie, gdy długość wejście jest 0 ponownie.

oprócz tego powinieneś podłączyć się onkeyup, a nie onkeydown.

można spróbować tutaj: jsfiddle.net/DBJfN/

Answer 3

Najlepiej jest, jeśli używasz onkeyup() zamiast onkeydown(). Problem polega na tym, że wartość wejścia nie jest aktualizowana na zdarzeniu 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; 
}