0

Вообщем проблема такая, у меня через цикл из бд, вытягиваются карточки, и на каждой карте есть 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');
        }
});

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


Вот еще сам 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>

1 ответ 1

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>

3
  • этот способ не подойдет по той причине что клиент не должен нажать кнопку "оплатить" до тех пор пока не будет активирован нужный чекбокс, а в вашем способе весь лейб служит чекбоксом
    – marselzozo
    25 апр 2020 в 11:00
  • @marselzozo переделал - теперь если не отметить checkbox не нажмёшь 25 апр 2020 в 12:18
  • @marselzozo а для чего писать скрипты если работает без них ? 25 апр 2020 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.