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.
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.$('form input[type="checkbox"]:not(:checked)').length. This will give the exact number of checkboxes that are currently unchecked.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>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>Just compare checked and not checked counts on any change.
input[type="submit"] also$("#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>