如果输入字段为空,请禁用提交按钮

Question

我正在尝试禁用提交按钮,如果用户没有提供任何文本.

乍一看它看起来一切正常,但如果用户键入一些文本,然后删除它,提交按钮就会启用.

这是我的代码:

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);
    $('#message').keyup(function(){
        if($(this).val.length !=0){
            $('.sendButton').attr('disabled', false);
        }
    })
});

Answer 1

您只能禁用,只有在准备就绪document.ready时才会发生这种情况,DOM但是disable当文本框变空时您也需要在keyup事件中.也$(this).val.length改为$(this).val().length

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);
    $('#message').keyup(function(){
        if($(this).val().length !=0)
            $('.sendButton').attr('disabled', false);            
        else
            $('.sendButton').attr('disabled',true);
    })
});

或者您可以使用条件运算符而不是if语句.也使用prop而不是attr作为属性不被jQuery 1.6及以上版本推荐用于禁用,检查等.

从jQuery 1.6开始,.attr()方法为尚未设置的属性返回undefined.要检索和更改DOM属性(如表单元素的已检查,已选择或已禁用状态),请使用 .prop()方法,jQuery文档

$(document).ready(function(){
    $('.sendButton').prop('disabled',true);
    $('#message').keyup(function(){
        $('.sendButton').prop('disabled', this.value == "" ? true : false);     
    })
});  

Answer 2

试试这个代码

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);

    $('#message').keyup(function(){
        if($(this).val().length !=0){
            $('.sendButton').attr('disabled', false);
        }
        else
        {
            $('.sendButton').attr('disabled', true);        
        }
    })
});

检查演示小提琴

您缺少if语句的else部分(如果文本框为空则再次禁用该按钮)和函数 ()后的括号valif($(this).val.length !=0){