jeudi 31 octobre 2019

Disable button if checkboxes are unchecked - across groups - in an ajax response

This is an adaptation of Disable button if all checkboxes are unchecked and enable it if at least one is checked

On the above post they are disabling a button unless at least 1 checkbox is checked.

In my situation, I have 2 sets of checkboxes:

<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>

Followed by a submit button

<button>Continue</button>

What I'm trying to do is disable the 'Continue' button unless at least 1 checkbox is checked in both groups (.clone-ctp__filters and .clone-ctp__users).

The checkboxes themselves have been rendered via an ajax response, i.e. the HTML is written to .clone-ctp__filters and .clone-ctp__users as the response from 2 separate ajax requests to get the appropriate data.

I've used ajaxStop to make sure the code to disable/enable the button fires after the ajax response has completed:

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

This has the same effect as the linked post. It will disable the button unless at least 1 checkbox is checked. But it has no bearing on which set of checkboxes that's from.

My solution to this was to duplicate the code, e.g.

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

Then when that completes repeat it with

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

This goes against the principles of DRY. Is there a more elegant way to write this?

jquery 3.2.1




Aucun commentaire:

Enregistrer un commentaire