禁用元素，直到其他输入字段有效

Question

我正在使用带有JavaScript验证的HTML5表单。 我想禁用一个选择元素，直到几个输入框包含有效数据。 这是我的简化HTML：

<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num1" required onchange="valid(this)" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num2" required onchange="valid(this)" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num3" required onchange="valid(this)" />
<br />
<select id="drop" disabled>
    <option>disabled until input boxes are valid</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

这是简化的javascript：

function valid(obj) {
    if ((obj.validity) && (!obj.validity.valid)) {
        return false;
    } else {
        return true;
    }
}

var numA = document.getElementById("num1"),
    numB = document.getElementById("num2"),
    numC = document.getElementById("num3");

if (valid(numA) && valid(numB) && valid(numC)) {
    document.getElementById("drop").disabled = false;
}

这是我的jsfiddle

可以使用普通的'ol javascript吗？ 由于我仍在尝试学习Javascript，因此我还不熟悉JQuery。

每当输入字段内容更改时，我都想验证输入。 然后，将需要检查所有其他输入字段（num1，num2，num3）是否有效。 当且仅当全部有效时，才在select元素上将disable设置为false。

有一个更好的方法吗？

Answer 1

尝试

<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num1" required onchange="check()" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num2" required onchange="check()" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num3" required onchange="check()" />

然后

function valid(obj) {
    //simplified version
    return !obj.validity || obj.validity.valid;
}


var numA = document.getElementById("num1"),
    numB = document.getElementById("num2"),
    numC = document.getElementById("num3");

function check() {
    document.getElementById("drop").disabled = !valid(numA) || !valid(numB) || !valid(numC);
}
check();

演示： 小提琴

将脚本保留在页面底部，以确保执行document.getElementById时，该元素将已经存在于dom中。 在jQuery中，您需要将脚本放置在No Wrap - Body （左侧面板中的第二个下拉列表）

Answer 2

这是给你的答案。 每次更改输入值时，都需要检查条件是否所有输入都有效。

这是编辑版本

HTML

<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num1" required onchange="check()" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num2" required onchange="check()" />
<br />
<input type="number" pattern="[0-9]{2}" min="1" max="100" id="num3" required onchange="check()" />
<br />
<br />
<select id="drop" disabled>
    <option>disabled until input boxes are valid</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

这是JS

function valid(obj) {
    if (obj.validity && !obj.validity.valid) {
        return false;
    } else {
        return true;
    }
}

    var numA = document.getElementById("num1"),
        numB = document.getElementById("num2"),
        numC = document.getElementById("num3");
function check(){

    if (valid(numA) && valid(numB) && valid(numC)) {
        document.getElementById("drop").disabled = false;
    }
}

不要忘记检查Nowrap-在JSfiddle上

Answer 3

这是您在jsFiddle上简化的代码

此代码将在所有内容均有效的情况下将dropdown list的状态切换为enabled ，如果用户将输入变为无效，则将状态切换回disabled 。

JS：

function valid(obj) {
    return !( obj.validity && !obj.validity.valid )
}

function testValidity() {
    document.getElementById("drop").disabled = !(
        valid( document.getElementById("num1") ) && 
        valid( document.getElementById("num2") ) && 
        valid( document.getElementById("num3") )
    );
}

HTML：

<input ... onchange="testValidity()" ... />

Answer 4

到目前为止，所有答案都是正确的，但是如果您不想将onchange属性添加到每个输入中，则可以选择以下方法：

function valid(obj) {
    return !(obj.validity && !obj.validity.valid);
}

var inputs      = document.querySelectorAll('input'),
    inputLength = inputs.length,
    i;

var checkValidity = function() {
    var totalValid = 0;
    for (i = 0; i < inputLength; i++) {
        input = inputs[i];
        if (valid(input)) {
            totalValid += 1;
        }
    }

    document.getElementById('drop').disabled = (totalValid !== inputLength);
}

for (i = 0; i < inputLength; i++) {
    input = inputs[i];
    input.addEventListener('blur', checkValidity, false);
}

这只会向每个输入添加一个模糊事件侦听器，并根据所有输入的有效性来动态更改下拉列表中的禁用状态。 如果最终有一个带有必填属性的下拉菜单，则会遇到一些问题，因此您可能希望从inputs数组中删除该输入。

这是jsfiddle： http://jsfiddle.net/EV88V/10/