Как сделать неактивный блок при неактивном чекбоксе?

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

И второй вопрос, как сделать, чтобы при нажатии на “-” число не уходило в минус

Помогите плиз

вот ссылка http://1863983.abctest1.web.hosting-test.net/test/

   <?php
   $basic_price = apply_filters('basic_price', 199);
   $extra_page_price = apply_filters('extra_page_price', 0);
   ?>
<section class="payment" id="payment">
<div class="container">
    <div class="flex-wrap">
        <div class="card card-list" id="card-list">
            <h2 class="title">Your card</h2>
            <div class="checkbox">
                <input type="checkbox" class="checkbox__input" id="checkbox_one_page" checked>
                <label for="checkbox_one_page" class="checkbox__label">Project name: Okirobo <br> 
<span class="subtitle">One page (Base)</span></label>
            </div>


            <div class="check-block">
                <div class="checkbox">
                    <input type="checkbox" class="checkbox__input" id="checkbox_more_page">
                    <label for="checkbox_more_page" class="checkbox__label">Add more pages <br> 
                    <span class="subtitle">Number of additional pages</span></label>
                </div>

                <div class="quantity-block">
                    <span class="minus" id="minus">-</span>
                    <input class="quantity" type="text" size="3" min="0" step="0" max="0" value="0" />
                    <span class="plus" id="plus">+</span>
                </div>
            </div>
            <a href="#" class="btn btn-grey">Back to project</a>
        </div>

        <div class="card card-summary" id="card-summary">
            <h2 class="title">Order summary</h2>
            <div class="summary-block">
                <p class="summary-text">One page (Base)</p>
                <p class="summary-price">$<span id="summary-price_one_page"><?php echo $basic_price;?></span></p>
            </div>
            <div class="summary-block">
                <p class="summary-text"><span id="pages_num">0</span> additional pages</p>
                <p class="summary-price" id="summary-price_more_page" data-price="100" >$<?php echo $extra_page_price;?></p>
            </div>
            <div class="total-block">
                <h3 class="total-text">Total</h3>
                <p class="total-price">Us $<span id="summary-price_total"><?php echo $basic_price + $extra_page_price;?></span></p>
            </div>
            <a href="#" class="btn btn-red">Pay</a>
            <a href="#" class="btn btn-grey">Back to project</a>
        </div>
    </div>
</div>
</section>

js

jQuery(document).ready(function () {

jQuery('#checkbox_more_page').click(function(){
if (jQuery(this).is(':checked')){
	jQuery('.quantity-block').removeAttr('disabled');
} else {
	jQuery('.quantity-block').attr('disabled', 'disabled'); 
}
});

jQuery('#checkbox_more_page').change(function() {

	     // click on minus
        jQuery('.minus').on('click', function () {
            minus();
        });

        // click on plus
        jQuery('.plus').on('click', function () {
            plus()
        });

    

    if(this.checked) {
        var quanity = jQuery('.quantity'),
            one_page_price = jQuery('#summary-price_one_page'),
            additional_page_count  = jQuery('#summary-price_more_page'),
            total_price = jQuery('#summary-price_total');




        // change value dirrectly in input
        quanity.on("input", function () {
           if (this.value > 0) {
               additional_page_count.text("$" + this.value * additional_page_count.data('price'));
               var price = parseInt(one_page_price.text()) + parseInt(this.value * additional_page_count.data('price'));
               total_price.text(price);
           }

        });

        function plus() {
            var value = quanity.attr('value');
            additional_page_count.css('display', 'block');
            jQuery('#minus').css('pointer-events', '');
            value++;
            quanity.attr('value',value);
            jQuery('#pages_num').text(value);

            var updated_price = value * additional_page_count.data('price');
            additional_page_count.text("$" + updated_price);

            //update_total(updated_price);

            var total = one_page_price.text();
            updated_total = parseInt(updated_price) + parseInt(total);
            total_price.text(updated_total);
        }

        function minus() {
            var value = jQuery('.quantity').attr('value');
            additional_page_count.css('display', 'block');
            value -= 1;
            if (value === 0) {
                value = 0;
                additional_page_count.css('display', 'none');
                jQuery('#minus').css('pointer-events', 'none')
            } else {
                jQuery('#minus').css('pointer-events', '')
            };
            quanity.attr('value',value);
            jQuery('#pages_num').text(value);


            var updated_price = value * additional_page_count.data('price');
            additional_page_count.text("$" + updated_price);


            var total = one_page_price.text();
            updated_total = parseInt(updated_price) + parseInt(total);
            total_price.text(updated_total);
        }



    } else {
        jQuery('#summary-price_total').text(one_page_price.text());
        quanity.attr('value',0);
    }

});

//AJAX submit form
jQuery('.btn-red').on('click', function (e) {
    e.preventDefault();
    jQuery.ajax({
        type: "post",
        url: ajaxParams.ajaxurl,
        data: {
            'action': ajaxParams.action,
            'security': ajaxParams.nonce,
            'total': jQuery('#summary-price_total').text()
        },
        success: function (response) {
            console.log("Total: "+ response.data)
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
})
});
  1. С чекбоксами по верстке не все гладко в сафари в хроме там тоже есть артефакты при активном фокусе.

  2. Это будет не одни и тем же?

jQuery('.plus').on('click', function () {
  plus()
});
jQuery('.plus').on('click', plus);
  1. Про минус
function minus() {
  var value = jQuery('.quantity').attr('value');
  value -= 1;
  if (value === 0) {
    value = 0;

Вы стачала отнимаете, а потом проверяется на ноль, возможно эта проверка уже не корректно работает, так как value = 0-1 и -1 === 0 уже не проходит :-)

Как вариант так строку поменяйте value = value ? value - 1 : 0; или так value = value > 0 ? value - 1 : 0;

  1. Пользуйтесь дебагером, это вам все объяснит

У вас в целом логическая ошибка, при открытии стр. все работает, потому что вы не нажимаете второй чекбокс, и не никой связи с аттрибутом disabled, при том вы disabled на тег SPAN навешиваете, а не INPUT как оно вообще дожно работать?

как только вы нажали jQuery(’#checkbox_more_page’).change(function() { все события добавляются и больше не убираются, jQuery(’#checkbox_more_page’).click(function(){ с навешиванием disabled ни на что не влияет.

При том вы уже спришивали об этом коде и jQuery(’#checkbox_more_page’).change(function() { навешивает jQuery(’.minus’).on('click постоянно по кругу, но это вы не исправили, так что проблемы продолжат вылазить то тут-то-там.

Успехов.

1 симпатия