jquery - 除非原始表单数据已更改，否则禁用提交按钮

Question

这是我使用的代码:

$('form').bind('keyup change', function(){

提交按钮默认设置为 DISABLED，如果输入文本字段、单选按钮检查状态或下拉选择值发生变化，则必须通过删除 disabled 属性将按钮设置为 ENABLED。

我的最终目标:

编辑:如果将任何内容更改回其默认值，提交按钮应设置为禁用 prop('disabled', true); - 需要一些方法来跟踪每一个变化。

============================================= =====

示例: 转到 Twitter 并登录，从下拉菜单中选择“设置”。在帐户页面中，更改您的用户名(只需添加一个额外的字符)，然后向下滚动，将复选框设置为选中，然后更改您的国家选择。

该按钮将在底部启用，返回并取消选中您之前选中的复选框，底部按钮将保持启用状态，

滚动到顶部，将您的用户名改回原来的样子，向下滚动按钮以保存更改仍将启用，转到国家/地区列表并将其改回您之前拥有的，现在最后向下滚动: 保存更改按钮将被禁用。

============================================= =====

编辑:这看起来非常相似，What is the best way to track changes in a form via javascript?

引述:“您可以默认禁用它，让 JavaScript 处理程序监视更改事件的输入以启用它。也许渲染一些隐藏字段或直接渲染 JavaScript 值以存储“原始值”，并且在这些更改事件中，根据原始值检查当前值以确定是否应启用或禁用按钮。 – David 1 月 18 日 15:14”(Enable 'submit' button only if a value in the form has been changed)。

Answer 1

我知道这是一个迟到的答案，但这种方法使用的代码比接受的答案少得多，不需要字段上的 ID 也不需要存储全局数组。

只需使用 .serialize() 来存储数据并检查它是否匹配每次更改。

http://jsfiddle.net/Pug3H/2/

$('form')
    .each(function(){
        $(this).data('serialized', $(this).serialize())
    })
    .on('change input', function(){
        $(this)             
            .find('input:submit, button:submit')
                .prop('disabled', $(this).serialize() == $(this).data('serialized'))
        ;
     })
    .find('input:submit, button:submit')
        .prop('disabled', true)
;