javascript - 使用Jquery检测页面中控件的变化

Question

我的页面包含大约 20 到 30 个基于查询字符串值的控件。我需要根据控件中的值更改将按钮更改为禁用。例如，在复选框列表中，对于所有控件，是否选中或取消选中某些内容、添加或删除某些文本等。

控件有文本框、选项按钮、复选框、选择控件和列表框。

我不想向所有控件添加静态方法。我确实有一个想法，即对所有控件进行后期绑定(bind)并附加事件。每当事件被触发时，该事件就会禁用该按钮。

是否有其他方法可以以简单的方式执行此功能(例如按键或使用事件属性窗口对象)？

Answer 1

正如 @ekhaled 指出的，您可以使用相同的处理程序来处理所有单击和更改事件。这是一个有点复杂的例子:

<div id="container">
    <input id="input1" type="text" value="" />
    <select>
        <option value="1">ABC</option>
        <option value="2">EFG</option>
    </select>
    <input type="button" value="Submit" />
</div>

及其 JavaScript:

$('#container').on("change click", ":input", function (event) {
    if (event.target.nodeName == "SELECT") {
        if ($(event.target).val() == "2") {
            console.log("disable");
            $(":button").prop("disabled", true);
        } else {
            $(":button").prop("disabled", false);
            console.log("enable");
        }
    }

    if (event.target.id == "input1" && $(event.target).val() == "") {
        $(":button").prop("disabled", true);
    }
});

See it working here.

但是，如果您主要关心的是验证，您应该看看 jquery validation

通过 jQuery 验证，您可以为构成整个表单验证的每个输入设置特定规则。它是非常可定制的，您可以更改错误的显示位置和方式、何时触发验证等。