$('form').bind('keyup change',function(){
默认情况下,提交按钮设置为disABLED,如果在输入文本字段内更改内容或单选按钮检查状态或下拉选择值,则必须通过删除disabled属性将该按钮设置为ENABLED.
我的目标:
编辑:如果任何东西变回其默认值,则提交按钮将被设置为禁用prop(‘disabled’,true); – 需要一些方法来跟踪每一个变化.
================================================== ==
示例:从下拉菜单中选择设置,进入Twitter并登录.在帐户页面中,更改您的用户名(只需添加一个额外的字符),然后向下滚动,设置一个复选框以进行检查,并更改您的国家/地区选择.
该按钮将在底部启用,返回并取消选中您先前检查的复选框,底部的按钮将保持启用状态,
滚动到顶部将您的UserName更改回到原来的位置,向下滚动按钮以保存更改仍将被启用,转到国家列表并将其更改为以前拥有的内容,现在最终向下滚动:保存更改按钮将被禁用
================================================== ==
编辑:这看起来很相似,What is the best way to track changes in a form via javascript?
引用:“您可以默认情况下将其禁用,并且JavaScript处理程序会监视更改事件的输入以启用它.也许渲染一些隐藏的字段或直接呈现JavaScript值来存储”原件“,并且在这些更改事件上检查当前反对原件的值,以确定按钮是否应启用或禁用. – David Jan 18 at 15:14“(Enable ‘submit’ button only if a value in the form has been changed).
解决方法
示例: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>