Если поле ввода пуст, отключите кнопку отправки

Я пытаюсь отключить кнопку отправки, если пользователь не предоставил никакого текста.

На первый взгляд выглядит, что все работает нормально, но если пользователь набирает текст, а затем удаляет его, кнопка отправки становится доступной.

Вот мой код:

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

Ответы

Ответ 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 docs

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

Ответ 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 (чтобы снова отключить кнопку, если текстовое поле пуст) и круглые скобки () после val в if($(this).val.length !=0){

Ответ 3

Простой способ сделать:

function toggleButton(ref,bttnID){
    document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}


<input ... onkeyup="toggleButton(this,'bttnsubmit');">
<input ... disabled='disabled' id='bttnsubmit' ... >

Ответ 4

Пожалуйста, попробуйте

<!DOCTYPE html>
<html>
  <head>
    <title>Jquery</title>
    <meta charset="utf-8">       
    <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
  </head>

  <body>

    <input type="text" id="message" value="" />
    <input type="button" id="sendButton" value="Send">

    <script>
    $(document).ready(function(){  

      var checkField;

      //checking the length of the value of message and assigning to a variable(checkField) on load
      checkField = $("input#message").val().length;  

      var enableDisableButton = function(){         
        if(checkField > 0){
          $('#sendButton').removeAttr("disabled");
        } 
        else {
          $('#sendButton').attr("disabled","disabled");
        }
      }        

      //calling enableDisableButton() function on load
      enableDisableButton();            

      $('input#message').keyup(function(){ 
        //checking the length of the value of message and assigning to the variable(checkField) on keyup
        checkField = $("input#message").val().length;
        //calling enableDisableButton() function on keyup
        enableDisableButton();
      });
    });
    </script>
  </body>
</html>

Ответ 5

Для тех, кто использует coffeescript, я поместил код, который мы используем глобально, чтобы отключить кнопки отправки в нашей наиболее широко используемой форме. Адаптация ответа Адиль выше.

$('#new_post button').prop 'disabled', true
$('#new_post #post_message').keyup ->
    $('#new_post button').prop 'disabled', if @value == '' then true else false
    return