Как сделать button активным при отмеченном checkbox?

Question

[Junior Coder]

В FF этот код работает а в Chrome нет, подскажите пожалуйста где ошибка!?

<div>
	<h3 class="modal__title">Программа электронные договоры, файлы исходного кода</h3>
	<div>
		<div>
			<label for="form"><input id="form" type="checkbox"> <a href="/?page=license" target="_blank">Принимаю Лицензию для свободного ПО</a></label>
		</div>
		<div style="display:flex; justify-content:space-evenly;">
			<div>
				<form id="form" action="/files/source/source.zip">
					<button class="btn" disabled>Скачать</button>
				</form>
			</div>
			<div>
				<button class="js-modal-close">Отменить</button>
			</div>
		</div>
		<script>
			form.onchange = function () {
				var button = document.body.getElementsByClassName('btn')[0];
				if (button.disabled) button.disabled = false;
				else button.disabled = true;
			}
		</script>
	</div>
</div>

В FF кнопка "Скачать" становится активной, а в Chrome нет.

Comments

[Александр]

Вы используете одинаковые идентификаторы id="form" для чекбокса и формы, что может привести к конфликту в Chrome.
Исправьте идентификатор формы:

<form id="download-form" action="/files/source/source.zip">
  <button class="btn" disabled>Скачать</button>
</form>

<script>
  document.getElementById('form').onchange = function () {
    var button = document.body.getElementsByClassName('btn')[0];
    button.disabled = !this.checked;
  };
</script>

[Junior Coder]

Александр, да, спасибо!

Answer 1

[Dosybi]

<input id="form" type="checkbox" onclick="enableButton()" />

const button = document.querySelector('.btn')
const checkbox = document.querySelector('#form')

const enableButton = () => {
checkbox.checked
? (button.disabled = false)
: (button.disabled = true)
}