dtgj8529
2010-06-05 09:52
浏览 53

使用jQuery根据vars启用/禁用Button

Ok so, Im using jQuery to do username and email checks before a signup...

this sets a variable true or false depending on the response from php.

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

How exactly do i get it to watch those variables live?

Thanks :D The Code below is one of the sets of code that sets the functions

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;
    }

});

});
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dotj6816 2010-06-05 10:46
    已采纳

    I think it's better if you don't rely on variables and use custom events instead. For example, you can create and bind to a custom event which gets triggered when your ajax checker finishes. Here's a sample code which shows how this could work:

    // 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');
    

    Here's a sample of it working here: http://jsfiddle.net/wU8vY/

    点赞 评论
  • doyz51819 2010-06-05 10:02

    You don't get it to "watch" variable. You have to change the attributes in same place you set usr_checked (I presume you set it when your ajax call returns).

    If you post your ajax function, I might be able to be more specific.

    点赞 评论

相关推荐 更多相似问题