How to disable a button until all the input fields are filled using only JavaScript?

document.addEventListener('DOMContentLoaded', bindText);

function bindText(e) {
  const required = [...document.querySelectorAll(".inputs")];
  required.forEach(input => input.oninput = checkText);
}

function checkText(e) {
  /*❌: = Does not belong at end of line */
  const required = [...document.querySelectorAll(".inputs")];
  /*❌: `${id}` NOT "${id}"|BUT `${id}` === id */
  /*❓: Is id declared elsewhere? If not, use it's actual "idOfButton". 
        If you have multiple submit buttons then you should reassess
        your strategy. 
  */
  const button = document.getElementById(id);
  /*❌: = missing */
  button.disabled = !required.every(input => input.value.length > 0);
}

/*❌: '...' or "..." NOT "...' */
document.addEventListener('DOMContentLoaded', function() {
  /*❌: = : ' missing */
  const quizButton = document.querySelectorAll('.quiz_button');
  for (const button of quizButton) {
    /*⭕: In event handlers/listeners if it is a named function that's
          defined separately, remove the ()
    */
    button.addEventListener('click', (event) => checkQuiz);
  }
});
/*⭕: Event handlers pass the (e)vent object by default */
function checkQuiz(e) {
  const id = e.target.id;
  /*❌: / missing a \ needs to be escaped: \\ */
  /*❌: response* number 1 NOT letter l */
  let response1 = document.getElementById('id_question1').value.toUpperCase().replace(/\\/g, "");
  /*❌: / missing a \ needs to be escaped: \\ */
  let response2 = document.getElementById('id_question2').value.toUpperCase().replace(/\\/g, "");
  /*❓: Are sure there's a <div id="div">? */
  let div1 = document.getElementById('div');
  /*❌: '...' or '..." NOT '..." */
  let div2 = document.getElementById('div2');
  /*❓: var hoists to be global use let or const. In this case let 
        is the best choice
  */
  var correctAnswers = 0;

  fetch(`/check/${id}`)
    .then(response => response.json())
    .then(quiz => {
      /*❓: Is rightM declared elsewhere? If not,
             use let or const
      */
      rightM = "You got this correct. Great job!";

      let answ1 = quiz.answer1.toUpperCase().replace(/\s/g, "");
      if (answ1 === response1) {
        div1.innerHTML = rightM;
        div1.classList.add("correct");
        correctAnswers++;
      } else {
        div1.innerHTML = `The correct answer is ${quiz.answer1}. Nice try!`;
        div1.classList.add("incorrect");
      }

      let answ2 = quiz.answer1.toUpperCase().replace(/\s/g, "");
      if (answ2 === response2) {
        div2.innerHTML = rightM;
        div2.classList.add("correct");
        correctAnswers++;
      } else {
        div2.innerHTML = `The correct answer is ${quiz.answer2}. Nice try!`;
        div2.classList.add("incorrect");
      }
      /*🚩: DRY = Don't Reapeat Yourself. Iterate through quiz.answer1 with
             a loop or an array method.
      */
      //this repeats 8 more times

      console.log(correctAnswers);
      let score = document.getElementById("score");
      /*❌: ` missing */
      /*❌: $' '{ space between $ and { breaks interpolation */
      score.innerHTML = `
      Your score is ${correctAnswers}.Great job!:)`;
      score.classList.add("score_style");
      /*❓: is newPoint declare elsewhere? If not use let or const */
      newPoints = correctAnswers * 10;

      let currentUser = parseInt(document.getElementById("user_id").value);
      let currentPoints = parseInt(document.getElementById("user_points").value);
      let numOfPoints = currentPoints + newPoints;
      /*❌: ` missing*/
      fetch(`/points/${currentUser}`, {
        method: "PUT",
        body: JSON.stringify({
          points: numOfPoints
        })
      });
    });
}

<form>
  <input required value='XXXXXXXXXXX'><br>
  <input required value='XXXXXXXXXXX'><br>
  <input required placeholder='Enter text here'><br>
  <button>Submit</button>
</form>

// Reference the <form>
const F = document.forms[0];
// Reference all form controls
const fc = F.elements;
// Collect all name='required' into a HTMLCollection, convert it into an array
const required = [...fc.required];
// Reference the <button>
const done = fc.done;
/**
 * Bind input event to <form>...
 * ...enable the <button> if .every() <input> has a value
 */
F.oninput = e =>
  done.disabled = !required.every(input => input.value.length > 0);

<form>
  <input name='required' value='XXXXXXXXXXX'><br>
  <input name='required' value='XXXXXXXXXXX'><br>
  <input name='required' placeholder='Enter text here'><br>
  <button id='done' disabled>Done</button>
</form>

// Collect all .required into a NodeList, convert it into an array
const required = [...document.querySelectorAll('.required')];
// Reference the <button>
const done = document.getElementById('done');
/**
 * Bind the input event to each <input>...
 * ...<button> is enabled if .every() <input> has a value
 */
required.forEach(input => input.oninput = e =>
  done.disabled = !required.every(input => input.value.length > 0));

<form>
  <input class='required' value='XXXXXXXXXXX'><br>
  <input class='required' value='XXXXXXXXXXX'><br>
  <input class='required' placeholder='Enter text here'><br>
  <button id='done' disabled>Done</button>
</form>