jquery - 如果输入字段为空，则禁用提交按钮

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 准备就绪时发生一次，但您也需要在 keyup 事件中disable当文本框变空时。还将 $(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 因为属性不是 recommended by jQuery 1.6及以上表示禁用、选中等。

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method, jQuery docs

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