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

Question

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

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

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

有没有其他方法可以以简单的方式完成此功能（如 Keypress 或使用事件属性窗口对象）？

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 验证，您可以为构成整个表单验证的每个输入设置特定规则。它是非常可定制的，您可以更改错误的显示位置和方式，何时触发验证等。

Answer 2

您可以使用事件委托并将您的事件绑定到父元素，然后在该事件处理程序中编写所有逻辑。

无法真正向您展示太多，因为您没有包含任何示例或代码。但大致如下：

$("body").on('change click', 'input, select', function(){
   var _this = $(this);
   if(_this.is('input[type=checkbox].className')){
     //follow one logic
   }
   if(_this.is('input[type=radio].className')){
     //follow another logic
   }
   //etc, etc
})