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

Question

我在这里 (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);

有人可以提供样品吗？我没有头发可以拔了:-)

Answer 1

您复制的答案不是很好，因为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) 或任何合适的方法来完成。

Answer 2

您可以使用css 更改按钮的悬停样式。 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 中添加此内容

<div id="ru" class="hide">this is russia</div>
<div id="il" class="hide">this is israel</div>
<div id="us" class="hide">this is us</div>
<div id="in" class="hide">this is india</div>

在你的 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)

如果您想与其他divs 合作，那就太好了。但是，对于样式，最好使用 CSS :disabled 选择器：

例如，在您的 CSS 文件中：

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

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