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＆＃39;值不固定，您反复将其重新分配给下一个表单的元素，最终导致最后一个元素。

如何编写可以跨多个表单验证输入的JavaScript？

1 个答案: