Включить кнопку отправки, только если входные данные содержат данные

Question

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

                    $("input").each(function() {
                        $(this).keyup(function() {
                            console.log("keyup event fired");
                            $("input").each(function() {
                                if ( $(this).val() !== "" ) {
                                    empty = false;
                                } else {
                                    empty = true;
                                }
                            });
                            if ( empty ) {
                                $("#download-project").addClass("isDisabled");
                                $("#download-project").click(function(e) {
                                    e.preventDefault();
                                });
                            } else {
                                $("#download-project").removeClass("isDisabled");
                                $("#download-project").click(function(e) {
                                    e.preventDefault();
                                    $(".editor-form").submit();
                                });
                            }
                        });
                    });

Мой текущий код включает только кнопку, а затем, если пользователь удаляет данные, не отключает кнопку. Глядя на консоль, кажется, что клавиша срабатывает только один раз.

JSFiddle

Answer 1

Вы можете добавить прослушиватель событий input к каждому из тегов input, который будет срабатывать при изменении значения, и проверить, имеет ли какой-либо из тегов input значение это только пробелы.

const inputs = $('input'), downloadBtn = $('#download-project');
inputs.on('input', function(e){
  var invalid = inputs.is(function(index, element){
      return !$(element).val().trim();
  });
  if(invalid){
      downloadBtn.addClass("isDisabled").prop("disabled", true);
  } else {
      downloadBtn.removeClass("isDisabled").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
First Name: <input type="text"/><br/>
Last Name: <input type="text"/><br/>
Age: <input type="number"/><br/>
<button id="download-project" type="submit" disabled>
Submit
</button>
</form>

Answer 2

Попробуйте поставить прослушиватель событий change вместо keyup.

$("input#submit").prop("disabled", true);
let isOk = true;
$("input").change(function (){
    $("input").each(()=>{
        console.log(this); 
        if($(this).val() === "") {
           isOk = false;
        } 
    });
    if(isOk) $("input#submit").prop("disabled", false);
})

Тест: https://codepen.io/Opalecky/pen/xxwWmyJ