Блокировка кнопки без checkbox

Question

помогите, пожалуйста, как сделать блокировку кнопки "Далее" на JQuery, пока пользователь не поставит галочку на чекбоксе? В этой ситуации, код показываю:

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

Т.е. кнопка <button class="order_btn order_btn_next">Далее</button> должна быть не активна, пока пользователь не нажмет <input type="checkbox" class="hide" name="personal_data">

Огромное спасибо заранее.

Answer 1

Используйте атрибут disabled на элементе button:

<button id="button-id" class="some-class-name" disabled>

Который потом можно будет удалить когда Вы убедитесь что checkbox заполнен.

Answer 2

Я бы сделал вот так:

$(document).on('change', '[name=personal_data]', function() {
    let $btn = $(document).find('.order_btn_next');
    if(this.checked) {
      $btn.prop('disabled', false);
    } else {
      $btn.prop('disabled', true);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order_three_confirmation">
    <label class="order_label_checkbox">
      <span class="order_checkbox"></span>
      <input type="checkbox" class="hide" name="personal_data">
      Соглашение о предоставлении персональных данных.
    </label>
  </div>
  <div class="order_btns">
    <button class="order_btn order_btn_prev">Назад</button>
    <button class="order_btn order_btn_next" disabled>Далее</button>
  </div>
</div>

БЛОГ НА HUSL

Блокировка кнопки без checkbox

Ответы (2 шт):