使用 jQuery 启用/禁用基于 vars 的按钮答案

【问题标题】：Use jQuery to Enable/Disable a Button based on vars使用 jQuery 启用/禁用基于 vars 的按钮
【发布时间】：2010-06-05 09:52:35
【问题描述】：

好的，我在注册之前使用 jQuery 来检查用户名和电子邮件...

这会根据 php 的响应设置一个变量 true 或 false。

$(document).ready(function() {
                if (usr_checked == true) {
                    if (em_checked == true) {
                        $("#registerbttn").removeAttr("disabled");
                    }
                }
                else {
                    $("#registerbttn").attr("disabled", "disabled");
                }
            });

我究竟是如何让它实时观看这些变量的？

谢谢 :D 下面的代码是设置功能的代码集之一

pic1 = new Image(16, 16); 
pic1.src = "loader.gif";

$(document).ready(function(){

$("#username").change(function() { 

var usr = $("#username").val();

if(usr.length >= 3)
{
$("#unstatus").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

    $.ajax({  
    type: "POST",  
    url: "check.php",  
    data: "username="+ usr,  
    success: function(msg){  

   $("#unstatus").ajaxComplete(function(event, request, settings){ 

    if(msg == 'OK')
    { 
        $("#username").removeClass('object_error'); // if necessary
        $("#username").addClass("object_ok");
        $(this).html('&nbsp;<img src="accepted.png" align="absmiddle"> <font color="Green"> Available </font>  ');
        $("#registerbttn").removeAttr("disabled");
        var usr_checked = true;
    }  
    else  
    {  
        $("#username").removeClass('object_ok'); // if necessary
        $("#username").addClass("object_error");
        $("#registerbttn").attr("disabled", "disabled");
        $(this).html(msg);
        var usr_checked = false;
    }  

   });

 } 

  }); 

}
else
    {
    $("#status").html('<font color="red">The username should have at least <strong>3</strong> characters.</font>');
    $("#username").removeClass('object_ok'); // if necessary
    $("#username").addClass("object_error");
    $("#registerbttn").attr("disabled", "disabled");
    var usr_checked = false;
    }

});

});

【问题讨论】：

你能展示设置这些变量的代码吗？
嗯，当 ajax 函数被发送到 PHP 脚本时，它返回一个代码，“er, era, erm” 他们都将变量设置为 false，如果它返回“ok”则更新所有html数据说“未使用”并将var设置为true。现在有两个变量，当它们都设置为true时，它需要启用提交按钮，上面的代码是我用来执行此操作的，但不幸的是它没有看到变量实时并更新禁用的部分如果他们都是真的，我需要它来做到这一点，
<font> 标签有什么作用？
在响应错误时为字体添加颜色

标签： php jquery variables

【解决方案1】：

我认为最好不要依赖变量而是使用自定义事件。例如，您可以创建并绑定到自定义事件，该事件会在您的 ajax 检查器完成时触发。这是一个示例代码，它显示了它是如何工作的：

// on $(document).ready
$('#username')
  // bind to a custom event triggered when validation of username succeeded
  .bind('checkValid', function() {
    alert('enabling the button');
    $('#registerbttn').removeAttr('disabled');
  })
  // bind to a custom event triggered when validation of username failed
  .bind('checkFailed', function() {
    alert('disabling the button');
    $('#registerbttn').attr('disabled', 'disabled');     
  });


// In your ajax handlers (i.e. $("#unstatus").ajaxComplete), 
// if username was valid, trigger the valid event.
// This will call the checkValid handle we declared above and
// enable the button
$('#username').trigger('checkValid'); 

// If the username check failed though, trigger checkFailed instead
// which will call the handler above which disables the button
$('#username').trigger('checkFailed');

这是一个在这里工作的示例：http://jsfiddle.net/wU8vY/

【讨论】：

【解决方案2】：

你不会让它“监视”变量。您必须在设置 usr_checked 的同一位置更改属性（我假设您在 ajax 调用返回时设置它）。

如果您发布您的 ajax 函数，我可能会更具体。

【讨论】：