忽略标签更改的 JavaScript <select>

Question

我有一个禁用提交按钮的 javascript，除非原始表单数据已更改，我希望脚本忽略<select>标签的更改。请帮我实现这一目标。

代码：

$(function(){
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this)             
.find('input:submit, button:submit')
.attr('disabled', $(this).serialize() == $(this).data('serialized'))
;
})
.find('input:submit, button:submit')
.attr('disabled', true)
;
});

谢谢

Answer 1

您可以检查事件是否由select元素触发。如果是这样，请阻止进一步执行代码。

.on('change input', function(event) {
if (event.target.nodeName !== 'SELECT') {
$(this)             
.find('input:submit, button:submit')
.attr('disabled', $(this).serialize() == $(this).data('serialized'));
}
})

Answer 2

序列化时可以筛选选择标记

$(function(){
$('form')
.each(function(){
$(this).data('serialized', $(this).not('select').serialize())
})
.on('change input', function(){
$(this)             
.find('input:submit, button:submit')
.attr('disabled', $(this).not('select').serialize() == $(this).not('select').data('serialized'))
;
})
.find('input:submit, button:submit')
.attr('disabled', true)
;
});

这段代码现在正在做的是

1. 获取表单元素并使用$(this)掌握表单中的所有内容
2. 通过使用.not('select')，它说 - 获取表单中除选择标签以外的所有内容
3. 通过执行.serialize()，它说 - 拍摄表单内元素的快照，除了select标签
4. 通过拍摄快照，我们可以将该快照与提交期间的快照进行比较。如果快照相同，则意味着没有任何变化，因此应禁用该按钮。