Can someone provide some guidance on the script below? I'm utilizing it for a pop-up when a user attempts to add a product to the cart.
Presently, the button will activate if at least one checkbox is selected (although it's not working on fiddle). However, my desired functionality is to have the button disabled until all three checkboxes are checked.
It's important to note that there are two different pop-ups for two distinct brands. For one brand, only one checkbox needs to be checked for the button to activate. But for this second pop-up, there are three checkboxes. Therefore, I need the script to work with one checkbox selected and all three checkboxes checked.
<div>
<div class="vet-diet-info">
<p>
<label>
<input id="checkbox" type="checkbox"> Agree.
</label>
</p>
<p>
<label>
<input id="checkbox" type="checkbox"> Agree.
</label>
</p>
<p>
<label>
<input id="checkbox" type="checkbox"> Agree.
</label>
</p>
<p>
<a id="mainbutton" href="javascript:void(0)" data-dismiss="modal" class="btn btn-info" disabled="disabled">Confirm Purchase</a>
</p>
</div>
</div>
function SetVetDietsEventsPopup() {
jq("#checkbox").off("change").on("change", function() {
if (this.checked) {
jq("#mainbutton").removeAttr("disabled");
} else {
jq("#mainbutton").attr("disabled", "disabled");
}
});
jq("#btnVetDietsConfirmPurchase").off("click").on("click", function() {
if (jq(this).is(":disabled")) {
return false;
} else {
RunAddToCartButtonClickEvent();
return false;
}
});
}