Question

这是我的问题：

如果文本长度至少为5个字符，我需要“启用”按钮，如果按钮少于5个字符，则需要“禁用”按钮。

如果文本长度为5个字符，我还会添加$ .click函数来触发“无论”功能。现在，如果长度小于5个字符，我还需要“禁用”此点击功能。

但说起来容易做起来难。这是我现在的代码，它不起作用：）

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

我需要一些帮助才能实现这一目标。

更新

以下是基于此主题和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点击事件，当它长5个字符时，unbind当它更少时。

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

您是否尝试过禁用该元素而不是重新绑定它？我想这将允许您提前绑定createguide按钮，保持绑定，只需根据用户名输入切换启用/禁用。

$('#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')   
    }    
});

需要帮助使用jQuery计算textfield中的字符

2 个答案: