Need help counting characters in textfield using jQuery

Question

Here is my problem:

I need to "enable" a button if the text is at least 5 characters long, and "disable" the button if it's less than 5 characters.

If the text is 5 chracters long, I also add an $.click funtion to trigger a "whatever" function. Now, I also need to "disable" this click funtion if it's less than 5 characters long.

But easier said than done. This is the code I have now, which is not working :)

<input id="userName" name="userName" class="textfield50pc" type="text" maxlength="50" value=""/>

jQuery('#userName').keydown(function()
{
    if((jQuery(this).val().length + 1) == 5)
    {
        jQuery("#guide_btnCreateGuide").css({'background-position':'top', 'cursor':'pointer'});
        jQuery("#guide_btnCreateGuide").click(function() { do something });
    }
    else if((jQuery(this).val().length - 2) < 5)
    {   
        jQuery("#guide_btnCreateGuide").css({'background-position':'bottom', 'cursor':'default'});
        // Here I really would like to disable whatever I added in the OnClick above. But how?
    }                          
});

I need some help getting this working.

UPDATE

Here is the solution based on help from this thread and another thread.

        jQuery('#input_guideName').keyup(function(e)
        {
            if(this.value.length == 5)
            {
                jQuery("#guide_btnCreateGuide").css({'background-position':'top', 'cursor':'pointer'});
                jQuery("#guide_btnCreateGuide").bind('click', function() { 
                    createNewGuide(); 
                });
            }
            else if(this.value.length < 5)
            {
                jQuery("#guide_btnCreateGuide").css({'background-position':'bottom', 'cursor':'default'});
                jQuery("#guide_btnCreateGuide").unbind('click');
            }
        }); 

Answer 1

bind the click event when it's 5 characters long and unbind when it's less.

jQuery('#userName').keydown(function()
{
    jQuery("#guide_btnCreateGuide").unbind('click');
    if((jQuery(this).val().length + 1) == 5)
    {
        jQuery("#guide_btnCreateGuide").css({'background-position':'top', 'cursor':'pointer'});
        jQuery("#guide_btnCreateGuide").bind('click', function() { do something });
    }
    else if((jQuery(this).val().length - 2) < 5)
    {   
        jQuery("#guide_btnCreateGuide").css({'background-position':'bottom', 'cursor':'default'});
    }  
}

Answer 2

Have you tried disabling the element instead of re-binding it? I'm thinking this will allow you to bind the createguide button early, leave it bound, and simply toggle enable/disable per the username input.

$('#guide_btnCreateGuide').click(function() {
    // Do something  
});

$('#userName').keydown(function() {
    var username = $(this).val();
    if (username.length > 5) {
        $('guide_btnCreateGuide').attr('disabled', '')
    } else {
        $('guide_btnCreateGuide').attr('disabled', 'disabled')   
    }    
});