Question

这是Disable button if all checkboxes are unchecked and enable it if at least one is checked

的改编版

在上述帖子中，除非选中至少1个复选框，否则他们将禁用按钮。

在我的情况下，我有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();
});

这与链接的帖子具有相同的效果。除非至少选中了1个复选框，否则它将禁用该按钮。但这与来自哪个复选框无关。

我的解决方案是复制代码，例如

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

然后在完成时用

重复

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

这违反了DRY的原理。有没有更优雅的方式来写这个？

jquery 3.2.1

Answer 1

适合for循环（或forEach）。

另外，如果未选择任何一个组，请确保禁用“提交”功能（我在下面使用.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>

如果在ajax响应中未选中复选框（跨组），则禁用按钮

1 个答案: