How to connect a checkbox and a button so that others are not pressed?

Question

JavaScript

I have blocks that are formed from the base in a cycle, and in general it is necessary that there be a check box when clicking on which the button is activated or deactivated. But due to the fact that I have, let's say, 2 elements came from the cycle, then the checkbox activates all the buttons. How to make a button and a checkbox linked within the same element?

Answer 1

$('селектор чекбокса').on('change', function() {
  $(this)
    .closest('селектор блока с чекбоксом и кнопкой')
    .find('селектор кнопки')
    .prop('disabled', !this.checked);
}).change();

Answer 2

<div id='block-check-button' 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>
                <form action="" method="post">
                    <div class="button_submit_payment">
                        <button type="submit" id='payButton' class="buttonPayment btn-sm disablePayButton" id="paymentButton" disabled=""><?=GetMessage('PAYMENT')?></button>
</div>

$('#checkPay').on('change', function() {
  $(this)
    .closest('#block-check-button')
    .find('#payButton')
    .prop('disabled', !this.checked);
}).change();

Answer 3

input:not(:checked) + button {
  pointer-events: none;
  opacity: 0.5;
}
// либо
// input:not(:checked) + div button

The elements must be close.