Question

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

但是当第一个字段填满时，它不会禁用第二个字段。

Answer 1

你看过控制台了吗？

未捕获的SyntaxError：意外的令牌）
未捕获的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;
}

Answer 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  );
}

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

如何使用Javascript禁用输入字段？

3 个答案: