JQuery – 禁用提交按钮，除非原始表单数据已更改

我在这里找到了以下代码（ 禁用提交按钮，除非原始表单数据已更改 ）并且它有效，但对于我的生活，我无法弄清楚如何更改相同提交按钮的属性，文本和CSS。

我希望启用/禁用按钮时文本，背景和hover背景不同，并且还要切换另一个可见/隐藏的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); 

有人可以提供样品。 我没有留下的头发拉出来:-)

Answer 1

您复制的答案并不是那么好，因为form没有change或input事件。 而是Form元素。 因此，将事件绑定到表单中的实际元素。 除了你需要存储存储/当前数据是否彼此相等的状态然后相应地采取行动之外，其他一切看起来都没问题。 看看基于状态隐藏/显示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); 

  
    
 
Data isn't the same as before! 

Answer 2

您可以使用css更改按钮的hover样式。 CSS有hover状态到目标：

 [type='submit']:disabled { color: #ddd; } [type='submit']:disabled:hover { background-color: grey; color: black; cursor: pointer; border: none; border-radius: 3px; } [type='submit']:disabled { color: #ccc; } 

为了显示和隐藏，有很多技巧可以做到。 我认为以下是最简单的技巧，并且更易于理解。

在你的HTML中添加它

 
this is russia
 
this is israel
 
this is us
 
this is india 

在你的CSS中添加这个

 .hide { display: none; background: red;; } 

更新你的javascript如下：

 $('form').bind('change keyup', function () { ..... // get id of selected option var id = $("#country-list").find(":selected").val(); $('.hide').hide(); // first hide all of the divs $('#' + id).show(); // then only show the selected one .... }); 

这是工作的jsfiddle 。 如果这不是您正在寻找的，请告诉我，我会更新答案。

Answer 3

变更检测发生在change input事件上。
您可以将代码更改为以下内容以使用此计算值：

 $('form') .each(function(){ $(this).data('serialized', $(this).serialize()) }) .on('change input', function(){ var changed = $(this).serialize() != $(this).data('serialized'); $(this).find('input:submit, button:submit').prop('disabled', !changed); // do anything with your changed }) .find('input:submit, button:submit') .prop('disabled', true) 

如果你想与其他div一起工作，那就太好了。 但是，对于样式，最好使用CSS :disabled选择器：

例如，在CSS文件中：

 [type='submit']:disabled { color: #DDDDDD; } [type='submit']:disabled { color: #CCCCCC; }