@Anton - You need to make sure your checkbox and span are wrapped in the label tag, in order for the span to trigger the checkbox. Use the for attribute in the label to target the checkbox id. If this is an embed form, you might need to use javascript or jquery to inject the necessary elements and attributes but, the html structure should look like this:
@Anton - You need to make sure your checkbox and span are wrapped in the label tag, in order for the span to trigger the checkbox. Use the for attribute in the label to target the checkbox id. If this is an embed form, you might need to use javascript or jquery to inject the necessary elements and attributes but, the html structure should look like this:
I know this is an old thread, but your solution was very helpful and I was glad to find it as it saved me a lot of time.
However, I'm running into one weird issue. On the subscription preferences page, the 'unsubsubcribe all' checkbox works perfectly. The other options won't 'check'. Nothing happens.
If I hide the code that moves the original box all the way out to the left, and you can see the original checkboxes... it does work, if I click on those original boxes (it highlights the box with my custom checkmark correctly).
I wish I could share the page directly, but my client won't allow it until it goes live, unfortunately. I figured it was probably some other CSS blocking the click, so I z-index'd it forward, tried hiding all other things around it, but nothing seems to work. I just can't seem to isolate where the issue is coming from.
I'm hoping for some guidance on a place to look as it's driving me insane. Any help is greatly appreciated.