【JavaScript】全てのフォームが入力/選択されたらボタンを有効化する方法

HTML

<form id="theForm">
   <input type="text" required>
   <input type="radio" name="food" id="food01" required>
   <label for="food01">サラダ</label>
   <input type="radio" name="food" id="food02" required>
   <label for="food02">サラダ</label>
   <input type="radio" name="car" id="car01" required>
   <label for="car01">トヨタ</label>
   <input type="radio" name="car" id="car02" required>
   <label for="car02">ホンダ</label>
   <input type="submit" id="submitBtn" value="送信" disabled>
</form>

CSS

/*ボタンの初期状態*/
#submitBtn {
  transition: all 0.3s ease-in-out;
  background-color: #ddd;
　　color: #fff;
}
/*全て選択/入力された場合に背景色をオレンジに変更*/
.btn_active {
  background-color: orange;
}

JavaScript

const $form = document.getElementById('theForm');
const $submit = document.getElementById('submitBtn');

$form.addEventListener('change', update);
$form.addEventListener('input', update);

function update(e) {
  const isValid = $form.checkValidity();
  
  if(isValid) {
    $submit.removeAttribute('disabled');
    $submit.classList.add('btn_active');//クラスを追加したりしてもOK
    return;
  }
}