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

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

可以這樣用簡單的「醇的JavaScript實現的呢？由於我仍然在學習Javascript，我還不熟悉JQuery。

任何時候輸入字段的內容發生變化我想驗證輸入。然後它需要檢查所有其他輸入字段（num1，num2，num3）是否有效。如果並且只有在全部有效時，它纔在select元素上設置disabled = false。

有沒有更好的方法來做到這一點？

Answer 1

所有的答案至今是對的，但如果你不想在onc​​hange屬性添加到每個這裏輸入一個替代方案：

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/

Answer 2

嘗試

<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(); 

演示：Fiddle

保持腳本在頁面的底部，以確保在執行document.getElementById的元素是已經存在在dom中。在jQuery中，您需要將腳本放置在No Wrap - Body（第二個下拉列表中的左側面板）中

Answer 3

這裏是您的答案。每次更改輸入值時，如果所有輸入均有效，則需要檢查條件。

下面是編輯後的版本

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 4

這裏是你的代碼簡化爲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()" ... />