jquery根据状态数组禁用提交按钮

Question

我正在尝试进行自己的自定义表单验证。我想维护一个状态数组，每个字段都有自己的键：值（值是“好”或“坏”）。当数组包含“坏”时，我想禁用提交按钮。

错误/成功消息在每个字段旁边工作（我的 ajax 工作正常），但我无法禁用提交按钮。

$(function() {
    // Custom Validation
    var statusArray = {
        'email' : 'good',
        'passC' : 'good',
        'pass1' : 'good',
        'pass2' : 'good'
    }
    $("#email").blur(function() {
        var form_data = {email: $("#email").val()}
        $.ajax({
            url: "<?= base_url('lounge/validation/email'); ?>",
            type: 'POST',
            data: form_data,
            success: function(msg) {
                if (msg['status'] == false){
                    $('#email_status').html('<span class="lounge_error">'+msg['message']+'</span>');
                    statusArray['email'] = 'bad';
                }
                else {
                    $('#email_status').html('<span class="lounge_okay">'+msg['message']+'</span>');
                    statusArray['email'] = 'good';
                }
            }
        });
        statusCheck();
        return false;
    })
    // Password fields validation
    $('#change_password').change(function () {
        if ($(this).attr("checked")) {
            $('#current_password_status').html('').css({"display": "inline-block"});
            $('#new_password1_status').html('').css({"display": "inline-block"});
            $('#new_password2_status').html('').css({"display": "inline-block"});
            $("#current_password").blur(function() {
                var form_data = {password: $("#current_password").val()}
                $.ajax({
                    url: "<?= base_url('lounge/validation/password'); ?>",
                    type: 'POST',
                    data: form_data,
                    success: function(result) {
                        if (result['status'] == false){
                            $('#current_password_status').html('<span class="lounge_error">'+result['message']+'</span>');
                            statusArray['passC'] = 'bad';
                        }
                        else {
                            $('#current_password_status').html('<span class="lounge_okay">'+result['message']+'</span>');
                            statusArray['passC'] = 'good';
                        }
                    }
                });
                statusCheck();
                return false;
            });
            $("#new_password1").blur(function() {
                var form_data = {pass1: $("#new_password1").val()}
                $.ajax({
                    url: "<?= base_url('lounge/validation/newpass1'); ?>",
                    type: 'POST',
                    data: form_data,
                    success: function(result) {
                        if (result['status'] == false){
                            $('#new_password1_status').html('<span class="lounge_error">'+result['message']+'</span>');
                            statusArray['pass1'] = 'bad';
                        }
                        else {
                            $('#new_password1_status').html('<span class="lounge_okay">'+result['message']+'</span>');
                            statusArray['pass1'] = 'good';
                        }
                    }
                });
                statusCheck();
                return false;
            });
            $("#new_password2").blur(function() {
                var form_data = {pass2: $("#new_password2").val()}
                $.ajax({
                    url: "<?= base_url('lounge/validation/newpass2'); ?>",
                    type: 'POST',
                    data: form_data,
                    success: function(result) {
                        if (result['status'] == false){
                            $('#new_password2_status').html('<span class="lounge_error">'+result['message']+'</span>');
                            statusArray['pass2'] = 'bad';
                        }
                        else {
                            $('#new_password2_status').html('<span class="lounge_okay">'+result['message']+'</span>');
                            statusArray['pass2'] = 'good';
                        }
                    }
                });
                statusCheck();
                return false;
            });
        } else {
            $('#current_password_status').html('').css({"display": "none"});
            $('#new_password1_status').html('').css({"display": "none"});
            $('#new_password2_status').html('').css({"display": "none"});

        }
    });

});

function statusCheck() {
    var status = [];
    $.each(statusArray, function(key, value) {
        status.unshift(value);
    });
    if ($.inArray('bad', status) == '-1') {
        $("button[type=submit]").removeAttr("disabled");
    } else {
        $("button[type=submit]").attr("disabled", true);
    }
}

Answer 1

如下更新您的状态检查：

function statusCheck() {
    var isValid = true;
    $.each(statusArray, function(key, value) {
        if(value == 'bad')
            isValid = false;
    });
    if (isValid) {
        $("button[type=submit]").removeAttr("disabled");
    } else {
        $("button[type=submit]").attr("disabled", "disabled");
    }
}
$(document).ready(function(){statusCheck();});

也许您只是错过了在 jquery 就绪部分调用它。但是这段代码比使用数组检查状态要好。

Answer 2

你可以试试

  $("button[type=submit]").prop("disabled", true);

Answer 3

变化：

$("button[type=submit]").attr("disabled", true);

对此（Jquery 1.6+）：

$("button[type=submit]").prop('disabled', true);

或者这个：

$("button[type=submit]").attr('disabled', 'disabled');