编辑：

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);
    });
});

编辑：

Checkbox 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

您可以通过以下不同方式处理单选按钮和复选框

$（'input，select'）。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;
        }
    }

Answer 2

正如评论所说，radio按钮使用checked属性。将event传递到each并查看target.type：

$('input, select, checkbox').each(function (e) {
    if (e.target.type == "radio") {
        //check radio
    } else {
        if ($(this).val() != $(this).data('val')) {
            changed = true;
        }
    }
});

如果复选框值未从初始页面渲染更改，则禁用提交

编辑：

编辑2：

2 个答案: