Question

在我的HTML表单中，有2个文本框和一个下拉列表。

在加载页面时，下拉列表不应该是可编辑的（即：禁用）

填写完所有文本框后，下拉列表应该是可编辑的。

请在javascript中提出解决此问题的建议。

Answer 1

试试这个

<强> HTML

<input type="text" id="text1" onblur="myFunction()"> 
<input type="text" id="text2" onblur="myFunction()">
<select id="select1" disabled>
   <option>value</option>
</select>

<强>的Javascript

function myFunction() {
    if (document.getElementById("text1").value.length > 0 && document.getElementById("text2").value.length > 0) {
        document.getElementById("select1").disabled = false;
    } else {
        document.getElementById("select1").disabled = true;
    }
}

Answer 2

每当触发 keyup 事件时，都会检查输入元素值。如果两个输入元素都没有输入，则禁用选择元素。否则启用它。试试这种方式，

javaScript：

function SetControlState(){
    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].value.length == 0){
           selectddl.disabled = true;
           break;
        } else{
            selectddl.disabled = false;
        }
    }
}

var selectddl = document.getElementById("dropdl");
var inputs = document.getElementsByTagName('input');
var isEnabled = false;
for(var i = 0; i < inputs.length; i++){
    if(inputs[i].id == 'first' || inputs[i].id == 'second'){
        inputs[i].onkeyup = function(){
            SetControlState();
        };
    }
}

HTML：

<select name="ddl" id="dropdl" disabled="true">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

<input type="text" id="first"/>
<input type="text" id="second"/>

jsFiddle

在文本框中键入所有值后启用下拉列表

2 个答案: