If all checkboxes are checked enable submit button

Question

I have a simple form with some checkboxes and I'm trying to get it so that the submit button is enabled when all the checkboxes are checked.

I've been messing with some of the answers from here: Enable submit button only when all fields are filled

But it seems like it either doesn't enable the submit button or it enables it right after one is checked. Here's what I have:

$(document).on("change keyup", ".required", function(e) {
  let Disabled = true;
  $(".required").each(function() {
    let value = this.value;
    if (value && value.trim() != "") {
      Disabled = false;
    } else {
      Disabled = true;
      return false;
    }
  });

  if (Disabled) {
    $(".toggle-disabled").prop("disabled", true);
  } else {
    $(".toggle-disabled").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button" class="toggle-disabled" disabled>Submit</button>
  </p>
</form>

It's weird cause it sorta works, but as soon as I check one box the submit button is enabled. Looks like I have all the pieces there, but not sure if it's something within the change keyup or something else.

score 2 · Answer 1 · answered Aug 29 '22 at 14:00

You have to keep track of count as suggested by @tacoshy, I have modified your code to reflect the changes.

$(document).on("change keyup", ".required", function(e) {
  let Disabled = $(".required").length;
  $(".required").each(function() {
    if(this.checked) Disabled--;
  });

  if (Disabled) {
    $(".toggle-disabled").prop("disabled", true);
  } else {
    $(".toggle-disabled").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button" class="toggle-disabled" disabled>Submit</button>
  </p>
</form>

tacoshy · Accepted Answer · 2022-08-29T14:46:40.357

You only need an EventListener to check for changes made within the input (checkboxes). You do not need to listen to all changes or keyups on the entire document. So just use $('form input[type="checkbox"]').change(function(){ ... } which going to save resources.
You have to check how many checkboxes have not been checked with $('form input[type="checkbox"]:not(:checked)').length. This will give the exact number of checkboxes that are currently unchecked.
Now you can use an if/else-statement to see if that count is higher than 0 (which means that at least 1 checkbox is still unchecked. In my example I replaced the if/else-statement with a conditional ternary operator to save a few lines:

$('form input[type="checkbox"]').change(function(){
  var allChecked = !!$('form input[type="checkbox"]:not(:checked)').length;
  $('.toggle-disabled').prop('disabled', allChecked);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button" class="toggle-disabled" disabled>Submit</button>
  </p>
</form>

`var cond = ($('form input[type="checkbox"]:not(:checked)').length === 0) ? false : true;` can simply be `const cond = !$('form input[type="checkbox"]:not(:checked)').length;` — Mark Schultheiss, Aug 29 '22 at 14:22
@MarkSchultheiss if I change those lines to your recommendation then it already is true if a single element is checked. — tacoshy, Aug 29 '22 at 14:26
Yes, I typed too quick to get ANY not checked `const anyUnchecked = !!$('form input[type="checkbox"]:not(:checked)').length;` give it a boolean true on the not checked condition. Changed the name to better reflect use. still simpler than the ternary perhaps — Mark Schultheiss, Aug 29 '22 at 14:40
@tacoshy - Ahhhhh ok great! Yeah, I was wondering why in most of the examples I saw there was a `keyup` listener, but now it makes sense. — ultraloveninja, Aug 29 '22 at 17:23

score 0 · Answer 3 · answered Aug 29 '22 at 14:05

Assuming that it is just checkboxes and not other inputs you can just check the length of checked vs all checkboxes.

$(document).on("change keyup", ".required", function(e) {
  const disabled = $(".required:checked").length !== $(".required").length;
  $(".toggle-disabled").prop("disabled", disabled);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button" class="toggle-disabled" disabled>Submit</button>
  </p>
</form>

Doing it with array some

$(document).on("change keyup", ".required", function(e) {
  const cbs = Array.from(document.querySelectorAll(".required"));
  const disabled = cbs.some(function (cb) { return !cb.checked; });
  $(".toggle-disabled").prop("disabled", disabled);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button" class="toggle-disabled" disabled>Submit</button>
  </p>
</form>

Mark Schultheiss · Answer 4 · 2022-08-29T14:28:05.570

Just compare checked and not checked counts on any change.

Give the form an id (event.delegateTarget)
count all of the checkboxes (filter for that type)
count checked checkboxes
compare and set the property based on that
scope to the form for the button (might consider filter by input[type="submit"] also
trigger on load to set it disabled if not all checked at that point

$("#formid").on("change", ".required", function(event) {
  let allCheckboxes = $(event.delegateTarget)
    .find(".required").filter('input[type="checkbox"]');
  let checkedCount = allCheckboxes.filter(":checked").length;
  $(event.delegateTarget).find(".toggle-disabled")
    .prop("disabled", allCheckboxes.length != checkedCount);
}).trigger("change");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formid" action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button" class="toggle-disabled" disabled>Submit</button>
  </p>
</form>

Alternative

$("#formid").on("change", ".required", function(event) {
  let notAllChecked = !!$(event.delegateTarget)
    .find(".required").filter('input[type="checkbox"]:not(:checked)').length;
   $(event.delegateTarget).find(".toggle-disabled")
    .prop("disabled", notAllChecked);
}).trigger("change");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formid" action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button" class="toggle-disabled" disabled>Submit</button>
  </p>
</form>

NOTE: This has slightly more code to account for the possibility of things NOT being a checkbox having a "required" class — Mark Schultheiss, Aug 29 '22 at 14:44

score 0 · Answer 5 · answered Aug 29 '22 at 14:31

try this:

$(document).on("change keyup", ".required", function(e) {
  let Disabled = $(".required").length;
  $(".required").each(function() {
    if(this.checked) Disabled--;
  });

  if (Disabled) {
    $(".toggle-disabled").prop("disabled", true);
  } else {
    $(".toggle-disabled").prop("disabled", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button" class="toggle-disabled" disabled>Submit</button>
  </p>
</form>

score 0 · Answer 6 · answered Aug 31 '22 at 09:37

<html>
  <head><title>Checkbox</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
   
    <form action="#">
      <p>
        <label>
          <input type="checkbox" class="filled-in box required" name="item" />
          <span>Filled in</span>
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" class="filled-in box required" name="item" />
          <span>Filled in</span>
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" class="filled-in box required" name="item" />
          <span>Filled in</span>
        </label>
      </p>
      <p>
        <button type="button" class="toggle-disabled" disabled>Submit</button>
      </p>
    </form>
    <script>
     $('form input[type="checkbox"]').change(function(){
        var Checkboxcount=$('form input[type="checkbox"]').length;
        var Checkboxcheckcount = $('form input[type="checkbox"]:checked').length;
        if(Checkboxcount!=Checkboxcheckcount)
        {
          $('.toggle-disabled').prop('disabled', true);
        }
        else
        {
          $('.toggle-disabled').prop('disabled', false);
        }
        
        
      })
    </script>
  </body>
</html>

If all checkboxes are checked enable submit button

6 Answers6