Как соединить checkbox и button, но при этом чтобы не нажимались другие?

Question

Вообщем проблема такая, у меня через цикл из бд, вытягиваются карточки, и на каждой карте есть checkbox и button. Надо чтобы checkbox нажимался и в текущей карте активировалась кнопка. Я сделал вот так:

$('#checkPay').on('change', function(){
        let payButton = $('.buttonPayment');
        if($(this).is(':checked')){
            payButton.attr('disabled', false);
            payButton.toggleClass('disablePayButton');
        }else{
            payButton.attr('disabled', true);
            payButton.toggleClass('disablePayButton');
        }
});

Но он активирует все кнопки, во всех карточках... Как сделать чтобы выбиралось в пределах одной карты? Буду очень признателен!

Вот еще сам HTML

                    <div class="custom-control payment-checkbox mb-4 pl-2">
                        <input type="checkbox" id="checkPay" class="custom-control-input">
                        <label class="custom-control-label labelSms" for="customCheck1">Согласен с расчетом суммы к оплате</label>
                    </div>
                    <div class="button_submit_payment">
                        <button type="submit" class="buttonPayment btn-sm disablePayButton" id="paymentButton" disabled=""><?=GetMessage('PAYMENT')?></button>
                    </div>

Answer 1

Условие выполняется но опять же на css

Большинство проблем решается на css

.item {
  width: 300px;
  background: linear-gradient(#eeeeee 75%, #ffffff 25%);
  margin: 20px auto;
}

svg {
  margin: 20px auto 0 auto;
}

label {
  font-size: 14px;
}

.item a {
  pointer-events: none;
}

input:checked~a {
  pointer-events: all;
}

input:checked~a svg path {
  fill: orange;
}

<div class="item">
  <input type="checkbox" id="in1">
  <label for="in1">Согласен с расчетом суммы к оплате</label>
  <a href="http://yandex.kz" target="_blank">
    <svg width="150" height="60" style="display: block;">
     <path d="M1,15 15,1 140,1 140,45 124,59 0,59z" fill="rgba(200,200,200,0.5)"/>
        <text x="30" y="37">Оплатить</text>
    </svg>
  </a>
</div>

<div class="item">
  <input type="checkbox" id="in2">
  <label for="in2">Согласен с расчетом суммы к оплате</label>
  <a href="http://google.com" target="_blank">
    <svg width="150" height="60" style="display: block;">
     <path d="M1,15 15,1 140,1 140,45 124,59 0,59z" fill="rgba(200,200,200,0.5)"/>
        <text x="30" y="37">Оплатить</text>
    </svg>
  </a>
</div>

БЛОГ НА HUSL

Как соединить checkbox и button, но при этом чтобы не нажимались другие?

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