Prevent accordion header from bubbling down a click onto a checkbox in BigCommerce options?

Question

we have a bit of quirk while using a checkbox inside an accordion for BigCommerce product options. We are a bit stumped and are unsure how to tackle this. Basically we need to preserve the default state of checkboxii regardless of its parent function click. Sometimes they are checked by default, sometimes not.

---> EDIT --> FIXED ---> User drip suggested the label in accordion header was the culprit. We prefered to keep the for="1290387349xcjyhwer93" style tags for legacy needs. The key seems to be preventDefault()

$(function(optionAccordion) {
// triggers accodion with option-below wrapper @ SNIPPET_ProductAddToCartBelow
$( "div.option-below" ).accordion({
    header: "div.productAttributeLabel",
    autoHeight: false,
    collapsible: true,
    icons: null
});

    // stops accordion header labels with for="" from triggering a request to content
$("div.productAttributeLabel label").click(function(event) {
    event.preventDefault();
});


// triggers step complete icon on change
$(".option-below select, .option-below input, .option-below textarea, .option-below li.swatch").change(function() {
    $(this).parents(".productAttributeRow").addClass("accordionChecked")
});

});

*Example site link removed, but its any BigCommerce store

Answer 1

Look your checkbox ID:

id="9a3ee84cf083e3e4ad0d5aed35937730"

The text "I Understand That: " is surounded by a label that has a attr

for="9a3ee84cf083e3e4ad0d5aed35937730"

and you have another label with the same attr that is holding the checkbox...

So yep it's doing pretty much what it's supposte to do. :)

So it's actually a html problem, not JS.