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