0

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

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

有人看到有什么问题吗？（我想检查一个或多个复选框是否已从初始页面渲染更改）

$(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 答案的新代码。它几乎可以工作，但只有在最初未选中复选框，然后由用户选中时才有效。链接到 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);

    });

});

链接到 JSFiddle

4

2 回答 2

2

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

$('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;
        }
    }
于 2013-11-07T15:03:42.890 回答
0

正如评论所说，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;
        }
    }
});
于 2013-11-07T14:44:21.563 回答