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

Question

[Ольга]

Здравствуйте.
Есть 9 чекбоксов, пример:

<div class="checkboxwrap">
                        <input type="checkbox" class="check_osnastka" id="check7" name="check0" data-price-for-one="1400" data-price="1400">
                        <label class="flaticon-check" for="check7"><img class="pechati-img" src="images/osnastki/colop_r2045.jpg" class="scale" alt="Профессиональная оснастка Colop R2045"><span>1 400 ₽</span><div class="nazvanie-osnastki"style="font-size: 15px!important;">Профессиональная Colop</div></label>
                    
                </div>

и есть кнопка "Далее", которая становится активной при выборе хотя бы 1 чекбокса. Проблема в том, что если снять чекбокс и ничто не выбрано, кнопка продолжает оставаться активной. как можно исправить?

Кнопка задаётся следующим образом:

<a href="javascript:void(0)" class="button nextstep">Далее <i class="flaticon-next"></i></a>

Answer 1

[Сергей delphinpro]

Answer 2

[dollar]

Нужно создать глобальную переменную, в которой хранить число активных чекбоксов.

• Если чекбокс активирован, то активируется кнопка, и переменная увеличивается на +1.
  
• Если чекбокс деактивирован, то переменная уменьшается на 1, и если она стала равна 0, то кнопка деактивируется.
  

Comments

[Ольга]

Можете какой-то пример показать? Спасибо за помощь!

Answer 3

[Moses Fender]

я бы какой-нибудь такой монстр собрал:

var TNextStepButton = /** @class */ (function () {
    function TNextStepButton(options) {
        this.extend(this, options);
        this._element['__obj'] = this;
        this._initCheckboxes();
        this.isChecked();
    }
    Object.defineProperty(TNextStepButton.prototype, "enabled", {
        /**
         * Тут, собственно, производим движения с кнопкой "далее".
         */
        set: function (val) {
            /**
             * Кстати, у HTMLAnchorElement'а нет в прототипе disabled.
             * Тут надо выдумывать что-то, или вместо <a> делать <button> 
             */
            this._element.disabled = !val;
            console.log(val, this._element.disabled);
        },
        enumerable: true,
        configurable: true
    });
    /**
     * После каждого изменения в любом из чекбоксов, проверяем их состояние,
     * результат передаётся в сеттер элемента кнопки.
     */
    TNextStepButton.prototype.isChecked = function () {
        var ret = 0;
        [].map.call(this.inputs, function (_chb) {
            ret = ret | _chb.checked;
        });
        this.enabled = ret;
        return ret;
    };
    /**
     * Инициализация событий чекбоксов
     */
    TNextStepButton.prototype._initCheckboxes = function () {
        var _that = this;
        [].map.call(_that.inputs, function (_chb) {
            var _click = _chb.addEventListener('change', function (ev) {
                _that.isChecked();
            });
        });
    };
    Object.defineProperty(TNextStepButton.prototype, "inputs", {
        /**
         * Возвращает все чекбоксы из указанного контейнера
         */
        get: function () {
            return document.querySelectorAll(this.inputsContainerSelector + ' input[type="checkbox"]');
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Некоторое подобие extend'а
     */
    TNextStepButton.prototype.extend = function (first, second) {
        for (var id in second) {
            first[id] = second[id];
        }
        return first;
    };
    return TNextStepButton;
}());
document.addEventListener('DOMContentLoaded', function () {
    /**
     * По загрузке контента создаём объект у кнопки "далее"
     */
    var button = new TNextStepButton({
        _element: document.getElementById('nextstep'),
        inputsContainerSelector: '.checkboxes',
    });
});