Don't trigger child-checkbox onclick parent [duplicate]

This question already has an answer here:

• Checkbox stays checked when clicking on it in a dropdown 3 answers

I'm working on an AJAX based filter with a list of items a user can check on or off. Their structure is like so:

<a href="#" class="someidentifier"><input type="checkbox"> Filter label</a>

The checkbox really only serves as a visual reminder if it's active or not. Clicking the link applies or removes the filter and checks or unchecks the box.

Now the problem is that whenever users click directly on the checkbox, it just checks/unchecks the box without any action. Preferably what I want is for the checkbox to 'hide behind' the anchor tag. Click either the label, the checkbox or the space in between; it should all resolve in the same action. Earlier I saw people 'fix' this by imitating the checkbox with a static background image, however this could/would work, this would 'break' interface design as checkboxes are styled differently across browsers and platforms.

I've tried the following:

Make the checkboxes disabled (No luck)

Setting the checkbox.click action in jQuery to just stopPropagation()

Adding onclick="this.parentNode.click()" to the checkbox - Now this one seems to work, except it fires the click double (once for the and once for the checkbox), quickly enabling/disabling the filter at once.

Is there any HTML/CSS/jQuery to just make that inline checkbox sit in the back, behind a glass plate so that no user-interaction could reach it and instead is controlled by the parent anchor?