Функция setAttribute для флажка не влияет на целевую кнопку

Question

Я знаю, что этот вопрос задавался бесконечно, но, пройдя через все ответы, я ВСЕ ЕЩЕ не могу заставить свою функцию флажка / кнопки работать вообще. Я наконец-то получил это, чтобы перестать возвращать «это не функция», но теперь это просто не работает.

Цель состоит в том, чтобы предотвратить отправку формы, если не установлен флажок юридического отказа. Стандартные материалы, без результатов ... Пожалуйста, помогите!

function chkThis() {
  var isChk = document.getElementsByName('agecert');
  var isSub = document.getElementById('submit');
  if (isChk.checked == true) {
    isSub.setAttribute("disabled", "false");
  } else {
    isSub.setAttribute("disabled", "disabled");
  }
}

<form>
  <input name="agecert" type="checkbox" onclick="chkThis();" style="float: left;height: 20px;width: 25px;border: 1px solid red;" tabindex="8">
  <p style="font-size: 10pt;left: 30px;position: absolute;text-align: justify;">Legal disclaimer stuffs...</p>
  </div>

  <div name="subres" style="width: 400px;height: 50px;top: 235px;left: 30px;position: relative;border: none;">
    <button name="submit" type="submit" id="submit" style="left: 65px;" tabindex="9" disabled="disabled">Review Order</button>
    <button name="reset" type="reset" style="left: 245px;" tabindex="10">Reset Form</button>
  </div>
</form>

Answer 1

attributes и properties - разные вещи, но они в некоторой степени связаны.

attributes взяты из HTML, а properties установлены в DOM.

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

Я предоставил код, который демонстрирует установку атрибута и его удаление. Я также исправил несколько других проблем в коде.

В действительности, однако, ответ Криса Ли лучше, поскольку он задает properties и является гораздо более чистым подходом.

function chkThis() {
  // Note that we are getting the [0] -- the first matching name from the NodeList.
  var isChk = document.getElementsByName('agecert')[0];
  var isSub = document.getElementById('submit');
  if (isChk.checked) {
    isSub.removeAttribute("disabled");
  } else {
    isSub.setAttribute("disabled", "disabled");
  }
}

<form>
  <input name="agecert" type="checkbox" onclick="chkThis();" style="float: left;height: 20px;width: 25px;border: 1px solid red;" tabindex="8">
  <p style="font-size: 10pt;left: 30px;position: absolute;text-align: justify;">Legal disclaimer stuffs...</p>
  </div>

  <div name="subres" style="width: 400px;height: 50px;top: 235px;left: 30px;position: relative;border: none;">
    <button name="submit" type="submit" id="submit" style="left: 65px;" tabindex="9" disabled="disabled">Review Order</button>
    <button name="reset" type="reset" style="left: 245px;" tabindex="10">Reset Form</button>
  </div>
</form>

Answer 2

Прежде всего getElementsByName возвращает нодлист, вы не можете получить доступ к .checked напрямую, и вам не нужно == при проверке логического значения, также я отредактировал свойство disable, чтобы отключить / включить кнопку.
Следующий код должен работать.

function chkThis() {
  var isChk = document.getElementsByName('agecert');
  var isSub = document.getElementById('submit');
  if (isChk[0].checked) {
    isSub.disabled = false;
  } else {
    isSub.disabled = true;
  }
}

<form>
  <input name="agecert" type="checkbox" onclick="chkThis();" style="float: left;height: 20px;width: 25px;border: 1px solid red;" tabindex="8">
  <p style="font-size: 10pt;left: 30px;position: absolute;text-align: justify;">Legal disclaimer stuffs...</p>
  </div>

  <div name="subres" style="width: 400px;height: 50px;top: 235px;left: 30px;position: relative;border: none;">
    <button name="submit" type="submit" id="submit" style="left: 65px;" tabindex="9" disabled="disabled">Review Order</button>
    <button name="reset" type="reset" style="left: 245px;" tabindex="10">Reset Form</button>
  </div>
</form>