Question

我有一个文本字段和一个默认禁用的按钮。如果用户在文本字段中键入内容然后离开该字段，则该按钮应该已启用。

为什么我的代码不按预期工作？这是sample。

HTML

<input type="text" id="txtInput"></input>
<button class="buttEnable" disabled="disabled">Submit</button>

JS

$('#txtInput').keyup(
    function()
    {
        if( (this).val() == '');
        {
            $('.buttEnable').prop('disabled', 'true');
        }
        else
        {
            $('.buttEnable').prop('disable' , 'false');
        }
    }
);

Answer 1

原始代码有几个错误：

$中缺少(this).val()。
if条件后有一个额外的分号。
true和false不应引用。
disable在else分支中拼写错误。

此外，如果您只想在用户离开字段时启用/禁用该按钮，而不是在用户键入字符后立即启用/禁用该按钮，则应使用change而不是keyup。

这是一个重写版本，它修复了错误并消除了一些重复的代码：

$('#txtInput').change(
    function()
    {
        var isEmpty = !$(this).val();
        $('.buttEnable').prop('disabled', isEmpty);
    });

更新：如果您还想在启用该按钮时添加CSS类，则可以致电toggleClass：

        $('.buttEnable').prop('disabled', isEmpty)
            .toggleClass('buttBlue', !isEmpty);

Answer 2

我建议您使用blur代替keyup，因为您一旦离开字段就会说＃34;

<强> JS

$('#txtInput').on("blur", function(){
    if($(this).val().length > 0 ){
        $(this).next(".buttEnable").attr("disabled",false);
    }
    else{
        $(this).next(".buttEnable").attr("disabled","disabled");
    }

});

fiddle

仅当文本字段包含文本时才启用按钮

2 个答案: