Проверка чекбокса на нескольких формах на одной странице (Лендинг)

Question

Есть Лендинг на котором 2 и более форм (около 7-ми).

Нужно проверить все формы на активный чекбокс,

к примеру если чекбокс активен то кнопка отправки так же активна $('.submit').attr('disabled', false);

и на оборот если чекбокс НЕ активен (Не выделен галочкой) то и кнопка отправить так же НЕ активна.

У меня собственно проблема в том что только первая форма в документе работает так как надо а остальные формы не работают.

Тоесть тот пример который я привел ниже видет только первую форму на странице а остальные формы не видит. HTML:

<tr>
    <td>
        <div class="checkbox_wrapp">
            <div class="box_check">
                <input type="checkbox" checked="checked" class="agree">
            </div>
            <div class="box_text">
                <p>Нажимая на 'Отправить заявку' вы соглашаетесь нобработку персональных данных указанными по <span>ссылке</span> </p>
            </div>
        </div>
    </td>
</tr>
<!--  -->
<tr>
    <td>
        <!-- <input name="type" type="hidden" value="button_tour"/> -->
        <input value="Подобрать тур" class="button submit" type="submit" name="button_tour"/>
    </td>
</tr>

jquery:

$(document).ready(function() {

    $(document).on('change', function() {

        if ($('.agree').prop('checked')){

            $('.submit').attr('disabled', false);

        } else {

            $('.submit').attr('disabled', true);

        }
    });
});

Answer 1

При условии, что все классы инпутов и классы submit-ов уникальные, и у каждого есть своя пара...

$(document).ready(function() {
  $(document).on('change', '.agree', function() {
    var checked = this.checked; // $(this).prop('checked');
    var index = $('.agree').index( $(this) );

    console.clear(); console.log(index);
    
    $('.submit').eq(index).prop('disabled', !checked);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="agree" type="checkbox">
<input class="submit" type="button" value="0" disabled>
<hr>
<input class="agree" type="checkbox">
<input class="submit" type="button" value="1" disabled>
<hr>
<input class="agree" type="checkbox">
<input class="submit" type="button" value="2" disabled>

$('.agree').index( $(this) ); — среди всех элементов .agree находит индекс текущего чекбокса. По этому же индексу потом можно достать нужный submit.

!checked восклицательный знак - логическое НЕ, т.е. !true == false

Если эти классы могут повторяться и у других элементов, можно привязать их нахождение к разметке,

$(this).closest('tr').next('tr').find('.submit').prop('disabled', !checked);

Но это плохая идея (врочем, как и верстать на таблицах), потому что можно потом забыть про этот код и что-то в разметке изменить) Классы надежнее.

P.s. аналог без jQuery

document.addEventListener('DOMContentLoaded', function(){
  document.addEventListener('change', function(e) {
    var target = e.target;
    if( !target.classList.contains('agree') ) return;

    var checked = target.checked;
    
    var agree = document.querySelectorAll('.agree');
    var index = Array.prototype.indexOf.call(agree, target);
    
    var submit = document.querySelectorAll('.submit');
    submit[index].disabled = !checked;
  });
});

<input class="agree" type="checkbox">
<input class="submit" type="button" value="0" disabled>
<hr>
<input class="agree" type="checkbox">
<input class="submit" type="button" value="1" disabled>
<hr>
<input class="agree" type="checkbox">
<input class="submit" type="button" value="2" disabled>

БЛОГ НА HUSL

Проверка чекбокса на нескольких формах на одной странице (Лендинг)

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