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

Question

我在这里找到了以下代码（ 除非原始表单数据已更改，否则禁用提交按钮 ），它可以工作，但对我而言，我不知道如何更改同一提交按钮的属性，文本和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> 

其余的可以使用:disabled选择器（CSS3）或其他合适的方法通过CSS完成。

Answer 2

更改检测发生在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;
}

Answer 3

您可以使用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 。 让我知道这是否不是您要的内容，我将更新答案。