If all checkboxes are checked enable submit button-CodePudding

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"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button"  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.

CodePudding user response：

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"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button"  disabled>Submit</button>
  </p>
</form>

CodePudding user response：

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"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button"  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"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button"  disabled>Submit</button>
  </p>
</form>

CodePudding user response：

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"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button"  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"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button"  disabled>Submit</button>
  </p>
</form>

CodePudding user response：

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"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button"  disabled>Submit</button>
  </p>
</form>

CodePudding user response：

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"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox"  name="item" />
      <span>Filled in</span>
    </label>
  </p>
  <p>
    <button type="button"  disabled>Submit</button>
  </p>
</form>