如何通过JS禁用或启用html组件？

Question

<form>
    <input type="text" id="name" onkeydown="myHandler()"/>
    <select id="select">
        <option value = "a">a</option>
        <option value = "b">b</option>
    </select>
</form>

<script>
    function myHandler() {
        if(document.getElementById("name")){
            document.getElementById("select").disabled = true;
            return;
        }
        document.getElementById("select").disabled = false;
    }
</script>

好吧，这就是我所做的。 每当我在输入中输入某些内容时，该选择都会禁用，但是即使擦除输入框中的所有输入，该选择也将保持禁用状态。 如果输入字段为空，我该怎么办才能使选择成为可选内容？

Answer 1

您可以检查内容以将其禁用：

  function myHandler() {
    var input = document.getElementById("name");
    var select = document.getElementById("select");
    if(input && input.value){
      select.disabled = true;
    } else {
      select.disabled = false;
    }
  }

在Codepen中查看该代码： https ://codepen.io/rodrigo73/pen/PdgewR ? editors = 1000

Answer 2

清空input时，没有理由document.getElementById("name")将为null 。 您还必须检查输入的值。

if(document.getElementById("name") && document.getElementById("name").value){
    document.getElementById("select").disabled = true;
    return;
}

document.getElementById("select").disabled = false;

Answer 3

我将使用onkeyup事件来检查文本框的输入值，因为onkeydown事件在按下键后会启动，因此，虽然文本框中只有一个字符，但它需要多清除一次时间来检查空值条件。

您的代码演示为：

 function myHandler() { console.log(document.getElementById("name").value.trim()); if (document.getElementById("name").value.length == 0) { document.getElementById("select").disabled = false; return; } else { document.getElementById("select").disabled = true; } } 

 <form> <input type="text" id="name" onkeyup="myHandler()"/> <select id="select"> <option value = "a">a</option> <option value = "b">b</option> </select> </form>