如何編寫驗證多種表單輸入的JavaScript？

Question

我正在嘗試編寫遍歷多個HTML表單的JavaScript，在編輯時檢查給定值的輸入，然後根據輸入值啓用/禁用該表單的提交按鈕。

我有一個非常簡單的示例腳本，它覆蓋了複選框的onclick函數，以測試我的代碼流。

<form> 
    <input type="checkbox" /> 
    <input type="submit" disabled="disabled" /> 
</form> 
<form> 
    <input type="checkbox" /> 
    <input type="submit" disabled="disabled" /> 
</form> 
<form> 
    <input type="checkbox" /> 
    <input type="submit" disabled="disabled" /> 
</form> 
<form> 
    <input type="checkbox" /> 
    <input type="submit" disabled="disabled" /> 
</form> 
<form> 
    <input type="checkbox" /> 
    <input type="submit" disabled="disabled" /> 
</form> 
<script type="text/javascript"> 
    forms = document.getElementsByTagName("form"); 
    for(i=0; i<forms.length; i++) 
    { 
     inputs = forms.item(i).getElementsByTagName("input"); 
     inputs.item(0).onclick = function() 
     { 
      if(this.checked) 
       inputs.item(1).removeAttribute("disabled"); 
      else 
       inputs.item(1).setAttribute("disabled","disabled"); 
     } 
    } 
</script> 

我想要發生的事：複選框以相同的形式更改提交按鈕的值。

實際發生了什麼：所有複選框都會更改最後一個表單中提交按鈕的值。

實際的代碼會更聰明一點，但我想在理解更復雜的事情之前瞭解JavaScript代碼的流程。

在此先感謝！

Answer 1

嘗試這樣：

document.body.onchange = function(e) { 
    // this delegates all the way to the body - if you have a more specific 
    // container, prefer using that instead. 
    e = e || window.event; 
    var t = e.srcElement || e.target; 
    if(t.nodeName == "INPUT" && t.type == "checkbox") { 
     // may want to add a className to the checkboxes for more specificity 
     t.parentNode.getElementsByTagName('input')[1].disabled = !t.checked; 
    } 
}; 

原因你看到你得到的，因爲inputs的價值是不固定的，你重複的行爲將其重新分配給下一個表格的元素，最終導致最後一個。