title: How to disable button on none checkbox checked and enable when at least one checkbox checked with jquery?
body: <p>I know there're several question like mine posted over here. But mine is a little different.</p>
  <p>I want to enable the button when at least one checkbox or all is checked. And disable it when none is checked.</p>
  <p>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.</p>
  <p>My concept is when there's no checkbox is checked. The button is disabled.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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');
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table table-bordered"&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;label&gt;&lt;input type="checkbox" class="form-check-input" id="checkall" value="b" /&gt; All&lt;/label&gt;&lt;/th&gt;
      &lt;th&gt;Product&lt;/th&gt;
      &lt;th&gt;Cost&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" class="form-check-input inv" name="bill" value="b1" /&gt; 1&lt;/td&gt;
      &lt;td&gt;Unit 1&lt;/td&gt;
      &lt;td&gt;$10&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" class="form-check-input inv" name="bill" value="b2" /&gt; 2&lt;/td&gt;
      &lt;td&gt;Unit 1&lt;/td&gt;
      &lt;td&gt;$8&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" class="form-check-input inv" name="bill" value="b3" /&gt; 3&lt;/td&gt;
      &lt;td&gt;Unit 1&lt;/td&gt;
      &lt;td&gt;$20&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button type="submit" class="btn btn-primary btn-lg float-end" disabled&gt;Submit&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Or you can play here <a href="https://jsfiddle.net/cLk8axm0/" rel="nofollow noreferrer">https://jsfiddle.net/cLk8axm0/</a></p>