jquery - 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]").attr("disabled", true);

これに（Jquery 1.6+）：

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

またはこれ：

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

Answer 3

あなたは試すことができます

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