$('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>