javascript - 如果复选框值与初始页面渲染相比没有更改，则禁用提交

Question

我有一个脚本，在表单值从初始页面渲染更改之前不允许提交。

除了单选按钮之外，一切正常。当我尝试选中或取消选中它们时，它们对按钮没有任何影响。

有人看出哪里出了问题吗？ (我想检查一个或多个复选框是否与初始页面渲染相比发生了更改)

$(document).ready(function () {
    var button = $('#submit-data');
    $('input, select, checkbox').each(function () {
        $(this).data('val', $(this).val());
    });
    $('input, select, checkbox').bind('keyup change blur', function () {
        var changed = false;
        $('input, select, checkbox').each(function () {
            if ($(this).val() != $(this).data('val')) {
                changed = true;
            }
        });
        $('#submit-data').prop('disabled', !changed);
    });
});

编辑:

复选框 html:

<input checked="checked" id="contactemail" name="contactemail" type="checkbox" />
<input id="contactsms" name="contactsms" type="checkbox" />
<input checked="checked" id="contactphone" name="contactphone" type="checkbox" />

编辑2:

来自 Marikkani Chelladurai 的回答的新代码。它几乎可以工作，但只有在最初未选中该复选框，然后由用户检查时才有效。 Link to JSFiddle

$(document).ready(function() {
    var button = $('#submit-data');

    $('input, select').each(function () {
        $(this).data('val', $(this).val());
    });


    $('input[type=radio], input[type=checkbox]').each(function (e) {
        $(this).data('val', $(this).attr('checked'));
    }); //For radio buttons

    $('input, select').bind('keyup change blur', function (e) {

        var changed = false;


        if (e.target.type == "radio" || e.target.type == "checkbox" ) {
            if($(this).data('val') !=  $(this).attr('checked')){
                changed = true;
            }
        } else {
            if ($(this).val() != $(this).data('val')) {
                changed = true;
            }
        }

        $('#submit-data').prop('disabled', !changed);

    });

});

Link to JSFiddle

Answer 1

您可以通过不同的方式处理单选按钮和复选框，如下所示

$('输入，选择').not('[type=checkbox]').each(function () { $(this).data('val', $(this).val()); });

$('input[type=radio], input[type=checkbox]').each(function (e) {
    $(this).data('val', $(this).is(':checked'));
}); //For radio buttons

$('input, select').bind('keyup change', function (e) {

    var changed = false;

    if (e.target.type == "radio" || e.target.type == "checkbox" ) {
       console.log($(this).is(':checked'));
        console.log($(this).data('val'));
       if($(this).data('val') !=  $(this).is(':checked')){
            changed = true;
        }
    } else {
        if ($(this).val() != $(this).data('val')) {
            changed = true;
        }
    }