How to disable button on none checkbox checked and enable when at least one checkbox checked with jq-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
  <tr>
    <th><label><input type="checkbox"  id="checkall" value="b" /> All</label></th>
    <th>Product</th>
    <th>Cost</th>
  </tr>
  <tr>
    <td><input type="checkbox"  name="bill" value="b1" /> 1</td>
    <td>Unit 1</td>
    <td>$10</td>
  </tr>
  <tr>
    <td><input type="checkbox"  name="bill" value="b2" /> 2</td>
    <td>Unit 1</td>
    <td>$8</td>
  </tr>
  <tr>
    <td><input type="checkbox"  name="bill" value="b3" /> 3</td>
    <td>Unit 1</td>
    <td>$20</td>
  </tr>
</table>
<button type="submit"  disabled>Submit</button>

Or you can play here https://jsfiddle.net/cLk8axm0/

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
  <tr>
    <th><label><input type="checkbox"  id="checkall" value="b" /> All</label></th>
    <th>Product</th>
    <th>Cost</th>
  </tr>
  <tr>
    <td><input type="checkbox"  name="bill" value="b1" /> 1</td>
    <td>Unit 1</td>
    <td>$10</td>
  </tr>
  <tr>
    <td><input type="checkbox"  name="bill" value="b2" /> 2</td>
    <td>Unit 1</td>
    <td>$8</td>
  </tr>
  <tr>
    <td><input type="checkbox"  name="bill" value="b3" /> 3</td>
    <td>Unit 1</td>
    <td>$20</td>
  </tr>
</table>
<button type="submit"  disabled>Submit</button>