Отключить кнопку формы, если все поля ввода текста не заполнены

Question

У меня есть форма с несколькими текстовыми вводами, я не хочу добавлять идентификатор к каждому из них, поскольку они сгенерированы из кода на стороне сервера - количество полей может отличаться и т. Д. Я просто хочу отключить кнопку отправки, пока в каждый ввод текста не будет введен текст.

Я получил это далеко, но только отключает кнопку, пока текст не войдет в одно текстовое поле ввода - я хочу, чтобы он оставался отключенным до тех пор, пока текст не был введен в все текстовые входы.

<script> 
     $(function() { 
      $('#button').attr('disabled', true); 

      $('input:text').keyup(function() { 
       $('#button').prop('disabled', this.value == "" ? true : false); 
      }) 
     }); 
    </script> 

Я также попытался $('input:text').each().keyup(function(){ - но не делает кнопку кликабельным?

Answer 1

$('#button').attr('disabled', true); 
$('input:text').keyup(function() { 
    var disable = false; 
     $('input:text').each(function(){ 
      if($(this).val()==""){ 
       disable = true;  
      } 
     }); 
    $('#button').prop('disabled', disable); 
}); 

Demo

Answer 2

Функция обратного вызова для keyup теперь проверяет только значение этого конкретного поля ввода (this.value). Вместо этого для этого нужно пропустить все поля ввода, которые необходимо заполнить, и только когда у всех есть текст, вы изменяете значение .prop.

$('input:text').keyup(function() { 
    $('#button').prop('disabled', allFieldsAreFilled()); 
}); 

function allFieldsAreFilled() { 
    var allFilled = true; 
    // check all input text fields 
    $("#yourForm input:text"]).each(function() { 
     // if one of them is emptyish allFilled is no longer true 
     if ($(this).val() == "") { 
      allFilled = false; 
     } 
    }); 
    return allFilled; 
} 

Answer 3

Попробуйте это:

$(function() { 
 
    var bool = true, flag = false; 
 
    $('#button').prop('disabled', bool); // use prop to disable the button 
 

 
    $(document).keyup(function() { // listen the keyup on the document or you can change to form in case if you have or you can try the closest div which contains the text inputs 
 
    $('input:text').each(function() { // loop through each text inputs 
 
     bool = $.trim(this.value) === "" ? true : false; // update the var bool with boolean values 
 
     if(bool) 
 
     return flag; 
 
    }); 
 
    $('#button').prop('disabled', bool); // and apply the boolean here to enable 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' /> 
 
<input type='text' /> 
 
<input type='text' /> 
 
<input type='text' /> 
 
<input type='text' /> 
 
<input type='button' id='button' value='button' />