I know there're several question like mine posted over here. But mine is a little different.
I want to enable the button when at least one checkbox or all is checked. And disable it when none is checked.
The problem is, I can enable the button when all or one is checked. But when I uncheck it. The button is not disabled as I unchecked.
My concept is when there's no checkbox is checked. The button is disabled.
$(function() {
$('#checkall').change(function() {
$('.inv').prop('checked', this.checked);
$('button[type="submit"]').removeAttr('disabled');
});
$('.inv').change(function() {
if ($('.inv:checked').length == $('.inv').length) {
$('#checkall').prop('checked', true);
$('button[type="submit"]').removeAttr('disabled');
} else {
$('#checkall').prop('checked', false);
$('button[type="submit"]').attr('disabled', 'disabled');
}
});
});<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th><label><input type="checkbox" class="form-check-input" id="checkall" value="b" /> All</label></th>
<th>Product</th>
<th>Cost</th>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b1" /> 1</td>
<td>Unit 1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b2" /> 2</td>
<td>Unit 1</td>
<td>$8</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b3" /> 3</td>
<td>Unit 1</td>
<td>$20</td>
</tr>
</table>
<button type="submit" class="btn btn-primary btn-lg float-end" disabled>Submit</button>Or you can play here https://jsfiddle.net/cLk8axm0/
So select all the checkboxes that are checked and look at the length
const cbs = $(".inv");
const checkAllCb = $("#checkall");
checkAllCb.on("change", function () {
cbs.prop("checked", this.checked).eq(0).trigger('change');
});
cbs.on("change", function () {
const checkedCount = $('.inv:checked').length;
$('button[type="submit"]').prop("disabled", checkedCount === 0);
checkAllCb.prop("checked", cbs.length === checkedCount);
});<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th><label><input type="checkbox" class="form-check-input" id="checkall" value="b" /> All</label></th>
<th>Product</th>
<th>Cost</th>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b1" /> 1</td>
<td>Unit 1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b2" /> 2</td>
<td>Unit 1</td>
<td>$8</td>
</tr>
<tr>
<td><input type="checkbox" class="form-check-input inv" name="bill" value="b3" /> 3</td>
<td>Unit 1</td>
<td>$20</td>
</tr>
</table>
<button type="submit" class="btn btn-primary btn-lg float-end" disabled>Submit</button>