我在这里找到了以下代码(Disable submit button unless original form data has changed),它可以正常工作,但是对我来说,我无法弄清楚如何更改同一提交按钮的属性,文本和CSS。
我希望启用/禁用按钮时文本,背景和悬停背景有所不同,并且还要切换另一个可见/隐藏的DIV。
$('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);
有人可以提供样品吗?我没有剩余的头发可以拔出:-)
最佳答案
您复制的答案不是很好,因为form
没有change
或input
事件。 Form
元素代替。因此,将事件绑定到表单中的实际元素上。除了需要存储所存储的/当前数据是否相等的state
,然后采取相应措施外,其他所有内容看起来都不错。看一下根据状态隐藏/显示div的演示。
$('form')
.each(function() {
$(this).data('serialized', $(this).serialize())
})
.on('change input', 'input, select, textarea', function(e) {
var $form = $(this).closest("form");
var state = $form.serialize() === $form.data('serialized');
$form.find('input:submit, button:submit').prop('disabled', state);
//Do stuff when button is DISABLED
if (state) {
$("#demo").css({'display': 'none'});
} else {
//Do stuff when button is enabled
$("#demo").css({'display': 'block'});
}
//OR use shorthand as below
//$("#demo").toggle(!state);
})
.find('input:submit, button:submit')
.prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="tb1" type="text" value="tbox" />
<input name="tb2" type="text" value="tbox22" />
<input type="submit" value="Submit" />
</form>
<div id="demo" style="margin-top: 20px; height: 100px; width: 200px; background: red; display: none;">Data isn't the same as before!</div>
其余的可以通过
CSS
使用:disabled
选择器(CSS3)或其他合适的方法完成。