禁用提交按钮,除非原始表单数据已更改

Question

这是我正在使用的代码:

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

默认情况下,提交按钮设置为DISABLED,如果输入文本字段内的某些内容发生更改,或单选按钮检查状态或下拉选择值,则必须通过删除已禁用的属性来设置按钮启用.

我的目标:

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

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

示例:转到Twitter,然后从下拉菜单中选择"登录".在帐户页面中,更改您的用户名(只需添加额外的字符),然后向下滚动,设置复选框以选中,并更改您的国家/地区选择.

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

滚动到顶部将您的UserName更改回原来的状态,向下滚动按钮以保存更改仍将启用,转到国家/地区列表并将其更改回您之前的状态,现在最后向下滚动:保存更改按钮将被禁用

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

编辑:这看起来非常相似,通过javascript跟踪表单中的更改的最佳方法是什么？

引用:"默认情况下,您可以将其禁用,并让JavaScript处理程序查看更改事件的输入以启用它.可能会渲染一些隐藏字段或直接呈现JavaScript值以存储"原件",并在这些更改事件上检查当前对原始值的值,以确定是否应启用或禁用该按钮. - David Jan 18 at 15:14"(仅当表单中的值已更改时才启用"提交"按钮).

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)
;

Answer 2

您只需要保存原始值,然后在每次更改后检查它们.

示例:http://jsfiddle.net/justincook/42EYq/15/

JavaScript的:

// Store original values
var orig = [];             
$("form :input").each(function () {
    var type = $(this).getType();
    var tmp = {'type': type, 'value': $(this).val()};
    if (type == 'radio') { tmp.checked = $(this).is(':checked'); }
    orig[$(this).attr('id')] = tmp;
});

// Check values on change
$('form').bind('change keyup', function () {
    var disable = true;
    $("form :input").each(function () {
        var type = $(this).getType();
        var id = $(this).attr('id');    
        if (type == 'text' || type == 'select') {
            disable = (orig[id].value == $(this).val());
        } else if (type == 'radio') {
            disable = (orig[id].checked == $(this).is(':checked'));
        }    
        if (!disable) { return false; } // break out of loop
    });

    $('#submit-data').prop('disabled', disable); // update button
});

// Get form element type
$.fn.getType = function () { 
    if(this[0].tagName == "INPUT")
        return $(this[0]).attr("type").toLowerCase() 
    else
        return this[0].tagName.toLowerCase();        
}

HTML:

<form id="" action="" method="post">
    <input type="text" value="Carl" name="firstname" id="firstname" />
    <input type="text" value="Johnson" name="lastname" id="lasttname" />
    <input id="radio_1" type="radio" value="female" name="sex" />Female
    <input id="radio_2" type="radio" value="male" name="sex" />Male
    <select id="country-list" name="countries">
        <option value="xx" selected="">Worldwide</option>
        <option value="in">India</option>
        <option value="us">United States</option>
    </select>
    <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>