Как заблокировать кнопку без проставленного чекбокса?

Question

[campot]

Как сделать так, чтобы кнопка была заблокирована до тех пор, пока пользователь не поставил галочку на чекбоксе?

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

<div class="order_three_confirmation">
        <label class="order_label_checkbox">
          <span class="order_checkbox"></span>
         <b> <input type="checkbox" class="hide" name="personal_data"></b>
          Соглашение о предоставлении персональных данных.
        </label>
      </div>
      <div class="order_btns">
        <button class="order_btn order_btn_prev">Назад</button>
        <b><button class="order_btn order_btn_next">Далее</button></b>
      </div>
    </div>

На чистом JS могу написать это так:

let checbox = document.querySelector('.hide');
		let submitButton = document.querySelector('.submit-button');
		if (checbox.checked) {
			submitButton.disabled = false
		} else {submitButton.disabled = true}

Но как это написать на JQuery?

Comments

[Eugene Chefranov]

чем не угодил чистый JS?

[campot]

Eugene Chefranov, оставшийся код на jquery написан, хочу и это на нем дописать. Точнее нужно)

[Alex]

Отключение кнопок "Отправить" в форме -- плохая идея. Это делает вашу форму менее доступной -- Пользователю нужно догадаться что сделать чтобы включить кнопку. А если пользователь ещё и не видит ваш интерфейс, то вы обязаны как то транслировать изменение состояния.

Вместо того, чтобы отключать кнопки просто выводите сообщение с ошибкой когда пользователь по ней нажимает. Или просто используйте соответствующие атрибуты и браузер всё сделает за вас.

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

Answer 1

[Andrey Vasilev]