JQuery - 除非原始表单数据已更改，请禁用提交按钮 [英] JQuery - Disable submit button unless original form data has changed

问题描述

我在这里找到了以下代码（禁用提交按钮，除非原始表单数据已更改），它的工作原理，但对于我的生活，我不知道如何更改相同的提交按钮的属性，文本和CSS。

我希望当按钮启用/禁用时，文字，背景和悬停背景不同，并且切换另一个DIV可见/隐藏。

  $（'form'）
 .each（function（）{
 $（this）.data（'serialized'，$（this）.serialize b $ b}）
 .on（'change input'，function（）{
 $（this）
 .find（'input：submit，button：submit'）
 .prop（'disabled'，$（this）.serialize（）== $（this）.data（'serialized'））
; 
}）
 .find submit，button：submit'）
 .prop（'disabled'，true）; 
  

有人可以提供样品。我没有头发离开： - ）

解决方案

你复制的答案不是很好， code>表单没有更改或输入事件。 表单元素。因此，将事件绑定到表单中的实际元素。除了需要存储存储/当前数据是否相等的状态，然后执行相应操作，其他一切看起来还好。查看基于状态隐藏/显示div的演示。

  $（'form' {$（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' 'disable'，state）; //当按钮为DISABLED时执行的操作if（state）{$（＃demo）。css（{'display'：'none'}）;} else {启用$（＃demo）。css（{'display'：'block'}）;} //或使用简写如下//$(\"#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 =tb1type =textvalue =tbox/> < input name =tb2type =textvalue =tbox22/> < input type =submitvalue =Submit/>< / form>< div id =demostyle =margin-top：20px; height：100px; width：200px; background：red; display：none;>数据与之前不同！< / div>  

其余的可以使用：disabled 选择器（CSS3）通过 CSS 或任何适当的。

I found the following code here (Disable submit button unless original form data has changed) and it works but for the life of me, I can't figure out how to change the properties, text and CSS of the same submit button.

I want the text, background and hover background to be different when the button is enabled/disabled and also toggle another DIV visible/hidden.

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

Can someone please provide a sample. I have no hair left to pull out :-)

解决方案

The answer you've copied isn't that great because a form doesn't have change or input events. Form elements do, instead. Therefore, bind the events on the actual elements within the form. Everything else looks okay except that you need to store the state of whether or not the stored/current data is equal to each other and then act accordingly. Take a look at the demo that hides/shows a div based on the state.

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

And the rest could be done via CSS using the :disabled selector(CSS3) or whatever is appropriate.

这篇关于JQuery - 除非原始表单数据已更改，请禁用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！