основной вопрос по javascript об отключении кнопок

Question

У меня есть простой фрагмент javascript, встроенный в мою HTML-форму, а не отдельный файл, который должен отключать кнопку отправки формы до тех пор, пока не будет установлен определенный флажок, но, похоже, он не работает.

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    submitButton.disabled = true;
    if (disclaimer.checked) {
        submitButton.disabled = false;
    }

 </script>

, который я написал и кажется простым и эффективным, но я не получаю результаты, которые я ищу. После исследования я вижу такие результаты, как

$('#check').click(function(){
if($(this).attr('checked') == false){
    $('#btncheck').attr("disabled","disabled");   
}
else
    $('#btncheck').removeAttr('disabled');
});

Теперь, очевидно, имена переменных и тому подобное называются по-разному, но это даже не выглядит отдаленно похожим на код javascript, который я предоставил выше, и мне трудно получить полезные советы из очевидно работающего кода ниже, который делает тоже самое. Может ли кто-нибудь разбить фрагмент кода ниже, чтобы я мог исправить код выше?

Это фрагмент кода с двумя указанными HTML-идентификаторами,

<label style='font-size: smaller;'>
  <input type='checkbox' name='disclaimer' id='disclaimer' required='required' />
  I understand that by submitting this form, 
  I am transferring any copyright and intellectual property rights to the form's owner, 
  that I have the right to do so,
  and that my submission is not infringing on other people's rights.
</label><br/>

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    submitButton.disabled = true;
    if (disclaimer.checked) {
        submitButton.disabled = false;
    }

 </script>


  <div class='vspace'/>
  <input type='submit' id='submit' name='came-from-form'/>

Редактировать: Тонны замечательных ответов ниже, которые были очень информативны для того, чтобы дать мне знать, с чем я работаю. Проблема, с которой я сейчас сталкиваюсь, заключается в реализации этих вещей. В приведенных ниже фрагментах это кажется очень простым для реализации, но, поскольку я пытаюсь реализовать каждый ответ ниже, я не вижу никаких результатов, что явно означает, что я делаю что-то не так где-то еще в своей форме. Я приложил большой фрагмент кода, о котором идет речь, если это поможет. В противном случае лучше задать новый вопрос.

Answer 1

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

var disclaimer = document.getElementById("disclaimer");
var submitButton = document.getElementById("submit");

submitButton.disabled = true;

disclaimer.addEventListener('change', function() {
  if (this.checked) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
})

Подробнее о событиях: https://developer.mozilla.org/en-US/docs/Web/Events

Answer 2

Кнопка отправки по умолчанию отключена в HTML:

<input type="checkbox" id="disclaimer">
<label for="disclaimer">Disclaimer</label>

<input type="submit" id="submit" disabled>

Самое простое решение с использованием синтаксиса ES6 без JQuery:

let disclaimerCheckbox = document.getElementById('disclaimer'),
    submitButton       = document.getElementById('submit');

disclaimerCheckbox.onchange = () => submitButton.disabled = !disclaimerCheckbox.checked;

JSFiddle

ПРИМЕЧАНИЕ: нет необходимости использовать событие DOMContentLoaded, если скрипт имеет атрибут defer .

Answer 3

Краткое объяснение

Вот краткое объяснение кода, который сильно зависит от библиотеки JavaScript, jQuery :

// click() is called every time the element `id="check"` is clicked
$('#check').click(function(){

  // if element with `id="check"` has an attribute called *checked* set to false or it is null, then perform the if-block, otherwise perform the else-block
  if($(this).attr('checked') == false){
    // set disabled attribute of element with `id="btncheck"` to value of `disabled`
    $('#btncheck').attr("disabled","disabled");   
  }
  else
    // remove disabled attribute of element with `id="btncheck"`
    $('#btncheck').removeAttr('disabled');
});

• что-либо в $() выбирает элемент в DOM, в основном используя CSS-подобные селекторы
• .attr() - это метод, который получает / устанавливает атрибут HTML элемента
• .removeAttr() - это метод, который удаляет атрибут HTML

---

Ваниль JS

То, чего вы хотите достичь, можно сделать с помощью vanilla JS.

const disclaimer   = document.querySelector("#disclaimer");
const submit       = document.querySelector("#submit");
submit.disabled    = true;    // default setting
const clickHandler = (event) => submit.disabled = !event.target.checked;

disclaimer.addEventListener('click', clickHandler );   // attach event

<form>
  <input type="checkbox" id="disclaimer"/>
  <button id="submit">Submit</button>
</form>

Answer 4

Я верю, что вы пытаетесь найти решение в ванильном JavaScript.

Вы должны прикрепить событие к элементу проверки следующим образом:

var disclaimer = document.getElementById("disclaimer");
document.getElementById("submit").disabled = true;
disclaimer.addEventListener('click', function(){
  var submitButton = document.getElementById("submit");
  submitButton.disabled = true;
  if (this.checked) {
      submitButton.disabled = false;
  }
});

<form>
  <input type="checkbox" id="disclaimer"/>
  <button id="submit">Submit</button>
</form>

Обновление:

В вашем коде скрипт выполняется до полной загрузки DOM. Следовательно вы получаете ошибку:

Uncaught TypeError: Невозможно установить для свойства 'disabled' значение null

Вы можете поместить скрипт в конец или обернуть свой код с помощью

DOMContentLoaded

Событие DOMContentLoaded наступает, когда исходный HTML-документ полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров. Совсем другая загрузка событий должна использоваться только для обнаружения полностью загруженной страницы. Невероятно распространенная ошибка - использовать load, когда DOMContentLoaded будет гораздо более уместным, поэтому будьте осторожны.

<label style='font-size: smaller;'>
<input type='checkbox' name='disclaimer' id='disclaimer' required='required' />
I understand that by submitting this form, 
I am transferring any copyright and intellectual property rights to the form's owner, 
that I have the right to do so,
and that my submission is not infringing on other people's rights.
</label><br/>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var disclaimer = document.getElementById("disclaimer");
    document.getElementById("submit").disabled = true;
    disclaimer.addEventListener('click', function(){
      var submitButton = document.getElementById("submit");
      submitButton.disabled = true;
      if (this.checked) {
        submitButton.disabled = false;
      }
    });
  });

</script>


<div class='vspace'/>
<input type='submit' id='submit' name='came-from-form'/>

Answer 5

Если вы хотите использовать jQuery, используйте prop (тоже не неправильно использовать attr, но я предпочитаю prop). Для флажка используйте событие change вместо click. Я бы сделал как:

$('#check').on("change", function(){
   var isChecked = $(this).is(':checked');
   $('#btncheck').prop("disabled", !isChecked); 
});

Answer 6

Надеюсь, это сработает для вас

   $('#disclaimer').click(function(){
if($(this).attr('checked') == false){
    $('#submit').attr("disabled","disabled");   
}
else
    $('#submit').removeAttr('disabled');
});

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

Answer 7

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

Первый говорит: прямо при загрузке страницы, если флажок установлен, включите кнопку. (подсказка: происходит только один раз)

Второй говорит: для каждого щелчка по флажку, если флажок установлен, включите кнопку.

Примерно так должно работать (не проверял):

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    function disableSubmitIfDisclaimerNotAccepted(){
        submitButton.disabled = true;
        if (disclaimer.checked) {
            submitButton.disabled = false;
        }

    }

    disclaimer.onclick = disableSubmitIfDisclaimerNotAccepted; // everytime the checkbox is clicked
    disableSubmitIfDisclaimerNotAccepted(); // on page load
</script>