Как отключить поле ввода с помощью JavaScript?

Я начинаю с Javascript, я написал эту функцию:

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

который отключает второе поле с именем cantidadCopias, если первое заполнено. 

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

но он не отключает второе поле, когда заполняется первое.

12
disabled-input html javascript

3 ответов

вы смотрели на консоль?

  • непойманные синтаксис ошибка: непредвиденная лексема )
  • Uncaught ReferenceError: disableField не определен

в первый раз у вас была орфографическая ошибка, Теперь ваш код имеет дополнительный )

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

теперь следующая проблема заключается в том, что вы не смотрите на длину значения. 

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

таким образом, код должен выглядеть как

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

но теперь, как это написано, как только это отключен, он не будет повторно включен. 

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

лучше всего, если вы используете onkeyup() вместо onkeydown(). Проблема в том, что значение ввода не обновляется при событии keydown.

Скрипка

<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

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

вы также должны включить его снова, когда входная длина снова равна 0.

кроме того, вы должны подключить onkeyup, а не onkeydown.

вы можете попробовать здесь:jsfiddle.net/DBJfN/

1