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

Posted 2023-05-09

【中文标题】jquery根据状态数组禁用提交按钮

【英文标题】：jquery disable submit button based on status array

【发布时间】：2012-06-01 08:09:34

【问题描述】：

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

错误/成功消息在每个字段旁边工作（我的 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);
    

【参考方案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 就绪部分调用它。但是这段代码比使用数组检查状态要好。

【讨论】：

nune，我认为您的答案比 $("button[type=submit]") 调用的修订更接近解决方案...我已经让 $("button[type=submit]").attr("disabled", true) 与过去的实验一起工作。这段代码仍然不起作用，当我在 ready 函数中包含 statusCheck() 时，它会破坏一切。

我看不出它怎么会破坏一切。你能提供一个jsfiddle吗？是的，您可以将属性值设置为任何值。大多数浏览器会忽略该部分。

我试图做一个 jsfiddle，但脚本依赖于从我的服务器中提取页面/脚本的 ajax 成功消息。出于某种原因，它似乎不适用于 jsfiddle。为了回答您的问题，当我尝试 $(function() statusCheck(); 时，没有任何效果......包括我对服务器的 ajax 调用以检查每个字段。不知道为什么……还没有完全弄清楚。

我将尝试修改此页面以适应 jsfiddle，而无需任何服务器端请求。即将推出。

这是我的小提琴：jsfiddle.net/pSx4u。更改 statusArray 中的值并进行测试。完美运行。

【参考方案2】：

你可以试试

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

【讨论】：

谢谢@thecodeparadox 我试过这个但没有成功。我怀疑问题可能出在其他地方......因为我之前在其他应用程序中使用过 $("button[type=submit]").attr("disabled", true)。

【参考方案3】：

变化：

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

对此（Jquery 1.6+）：

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

或者这个：

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

【讨论】：

谢谢@fbfcn 我尝试了这两个建议，但没有成功。我怀疑问题可能出在其他地方......因为我之前在其他应用程序中使用过 $("button[type=submit]").attr("disabled", true)。