如何禁用按钮，直到仅使用 JavaScript 填充所有输入字段？

Question

I am creating a quiz game, but I only want the user to be able to submit if all of the input fields are filled out using only JavaScript. I saw other similar questions on StackOverflow that used jquery, but I want to only use JavaScript.

html (Django template)

{% for q in quiz_questions %}
  <h3 class="quiz_questions">{{q.1}}
    <input type="text" id="id_question{{q.0}}" class="input">
  </h3>
  <div id="div{{ q.0 }}"></div>
  <br>
  <br>
  {% endfor %}
  <input type="submit" value="Submit" class="button quiz_button"
         id="{{ quiz.id }}" disabled="true">

current JavaScript

document.addEventListener('DOMContentLoaded', function(){
  enableChecking();
})

function enableChecking(){
  button = document.getElementsByClassName("quiz_button");
  if (document.getElementsByClassName("input").value === "") {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}

Answer 1

If you have a <form> wrapped around everything (which is very simple to do if you don't), add required to all of the <input> that'll prevent the <form> from being submitted should there be any blank <input> s.

 input { display: block; }

 <form> <input required value='XXXXXXXXXXX'> <input required value='XXXXXXXXXXX'> <input required value='XXXXXXXXXXX'> <input required value='XXXXXXXXXXX'> <input required value='XXXXXXXXXXX'> <input required value='XXXXXXXXXXX'> <input required> <button>Submit</button> </form>