Как отключить поле ввода с помощью 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>

Но это не отключает второе поле при заполнении первого.

Ответ 1

Вы посмотрели консоль?

Uncaught SyntaxError: Неожиданный токен)
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;
}

Ответ 2

Лучше всего использовать onkeyup() вместо onkeydown(). Проблема заключается в том, что значение ввода не обновляется при событии 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;
}

Ответ 3

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/