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 characters long, I also add an $.click function to trigger a “whatever” function.
Now, I also need to “disable” this click function 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'});
    }  
}