禁用“提交”按钮，除非原始表单数据已更改
下面是我使用的代码：
$('form').bind('keyup change', function(){默认情况下，“提交”按钮设置为“禁用”，如果输入文本字段中发生了某些更改，或者单选按钮检查状态或下拉选择值，则必须通过删除禁用属性来设置该按钮。
我的最终目标是：
编辑:如果任何内容被更改回其默认值，则submit按钮将被支柱设置为禁用(“禁用”，true)；-需要一些方法来跟踪每个更改。
====================================================
示例：转到Twitter，并从下拉菜单中选择Settings登录。在“帐户页”中，更改您的用户名(只需添加一个额外的字符)，然后向下滚动，将复选框设置为“选中”，并更改您的国家选择。
按钮将在底部启用，返回并取消选中以前选中的复选框，底部的按钮将保持启用，
滚动到顶部，将您的UserName更改回原来的状态，向下滚动按钮以保存更改仍将被启用，转到国家列表并将其更改回以前的状态，现在终于向下滚动:保存更改按钮将被禁用。
====================================================
编辑:这看起来很相似，通过javascript跟踪表单中的更改的最佳方法是什么？
引号：“默认情况下可以禁用它，并让JavaScript处理程序监视更改事件的输入以启用它。可能会呈现一些隐藏字段或直接呈现JavaScript值来存储”原件“，并在这些更改事件上对照原件检查当前值，以确定是否应该启用或禁用该按钮。- David 18，15:14”(只有在窗体中的值已更改时才启用“submit”按钮)。
回答 4
Stack Overflow用户
发布于 2013-05-16 18:04:15
您只需要保存原始值，然后在每次更改后对照它们进行检查。
示例：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>Stack Overflow用户
发布于 2014-07-16 21:06:00
我知道这是一个延迟的答案，但是这个方法使用的代码比接受的答案要少得多，不需要字段上的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)
;Stack Overflow用户
发布于 2020-03-22 14:38:23
@Nigel Angel答案的改进版本：
/* Disable the forms submissions until they have changed */
$(window).on('load', function (e) {
$('form').each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this).find(':submit, input[type="image"]')
.prop('disabled', $(this).serialize() == $(this).data('serialized'));
/* Check if input with type files has changed */
var changedFiles = $( ":file" ).filter(function( index ) {
return this.value != this.defaultValue;
}).length;
if ( changedFiles > 0) {
$(this).find(':submit, input[type="image"]')
.prop('disabled', false);
}
})
.find(':submit, input[type="image"]').prop('disabled', true);
});
- 将输入[type=“图像”]添加到执行提交的选择器列表中。
- 添加了类型文件的输入更改检查。
- 还缩短了使用的答案:提交以涵盖按钮和输入的情况。
https://stackoverflow.com/questions/16593222
复制相似问题
腾讯云开发者
