Кнопка Отключить, если флажки сняты - в разных группах - в ответе ajax

Question

Это адаптация кнопки Отключить, если все флажки сняты, и включить ее, если установлен хотя бы один флажок

В приведенном выше сообщении они отключают кнопку, если не установлен хотя бы один флажокпроверено.

В моей ситуации у меня есть 2 набора флажков:

<div class="clone-ctp__filters">
    <input type="checkbox"> <label>Foo 1</label>
    <input type="checkbox"> <label>Bar 2</label>
    <input type="checkbox"> <label>Baz 3</label>
</div>

<div class="clone-ctp__users">
    <input type="checkbox"> <label>Foo 5</label>
    <input type="checkbox"> <label>Bar 6</label>
    <input type="checkbox"> <label>Baz 7</label>
</div>

, за которыми следует кнопка отправки

<button>Continue</button>

Что я пытаюсь сделатьотключить кнопку «Продолжить» , если не установлен хотя бы один флажок в обеих группах (.clone-ctp__filters и .clone-ctp__users).

Предполагается, что кнопка «Продолжить» активна, только если вы отметили хотя бы 1 фильтр (.clone-ctp__filters) и хотя бы 1 пользователя (.clone-ctp__users).

Флажкисами были обработаны с помощью ответа ajax, то есть HTML записывается в .clone-ctp__filters и .clone-ctp__users как ответ от 2 отдельных запросов ajax для получения соответствующих данных.

Я использовал ajaxStop дляубедитесь, что код для отключения / включения кнопки срабатывает после завершения ответа ajax:

$(document).ajaxStop(function() {
    var checkBoxes = $('input[type="checkbox"]');
    checkBoxes.change(function () {
        $('button').prop('disabled', checkBoxes.filter(':checked').length < 1);
    });
    $('input[type="checkbox"]').change();
});

Это имеет тот же эффект, что и связанный пост. Кнопка будет отключена, если не установлен хотя бы один флажок. Но он не имеет никакого отношения к тому, с каким набором флажков это происходит.

Мое решение для этого было дублировать код, например,

var checkBoxes = $('.clone-ctp__filters input[type="checkbox"]');

Затем, когда он завершится, повторите его с

var checkBoxes = $('.clone-ctp__users input[type="checkbox"]');

Это идет вразрез с принципами СУХОЙ. Есть ли более элегантный способ написать это?

jquery 3.2.1

Answer 1

A для цикла (или forEach) будет уместным.

Дополнительно убедитесь, что вы отключили 'submit', если либо группа не выбрана (я использую .some ниже). Ваш текущий код отключит его, если группа последняя не выбрана.

var checkboxGroups = ['clone-ctp__filters', 'clone-ctp__users'].map(containerClass => $(`.${containerClass} input[type="checkbox"]`));
checkboxGroups.flat().forEach(checkbox =>
    checkbox.change(() =>
        $('button').prop('disabled', checkboxGroups.some(checkboxes => checkboxes.filter(':checked').length < 1))));
$('input[type="checkbox"]').change();

Или в ванильном JS:

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

var checkboxGroups = ['clone-ctp__filters', 'clone-ctp__users']
    .map(containerClass => [...$$(`.${containerClass} input[type="checkbox"]`)]);
    
checkboxGroups.flat().forEach(checkbox =>
    checkbox.addEventListener('change', () =>
        $('button').disabled = checkboxGroups.some(checkboxes => checkboxes.every(checkbox => !checkbox.checked))));

$('button').disabled = true;

<div class="clone-ctp__filters">
    <input type="checkbox"> <label>Foo 1</label>
    <input type="checkbox"> <label>Bar 2</label>
    <input type="checkbox"> <label>Baz 3</label>
</div>

<div class="clone-ctp__users">
    <input type="checkbox"> <label>Foo 5</label>
    <input type="checkbox"> <label>Bar 6</label>
    <input type="checkbox"> <label>Baz 7</label>
</div>

<button>Continue</button>