0

First, here's a screenshot for reference:

enter image description here

I'm trying to have a custom checkbox respond to mouse and touch events in such a way it can be toggled either by it's icon OR label, BUT when the user touches or clicks the additional information link, it should NOT trigger the checkbox to toggle on/off. These anchor tags are part of the <label> tags corresponding to their <input type="checkbox"> tags, like so:

<inputid="chkBoxID"type="checkbox" /><labelfor="chkBoxID">I agree to <a>Privacy Rules</a></label>

The problem I'm having now: when the link part is touched / clicked, the checkbox toggles and the event for the link fires (popup appears), it should only fire the link's event.

In case this matters: I've used preventDefault() and stopPropagation() to eliminate the 300ms delay on iOS (for toggling the checkboxes), but I'm not sure I've implemented correctly for this particular scenario. Perhaps I'm doing this totally the wrong way.

Which approach would you take for this?

Should I avoid using the <input type="checkbox"> tag at all and just forge a custom checkbox out of divs, CSS classes and some Javascript?

chamberlainpi
  • 4,854
  • 8
  • 32
  • 63
  • What should happen when you either click Privacy Rules or Contest Rules? should it open something else by NOT agreeing? if so, it seems to be working fine here: http://jsfiddle.net/t9cjd5bf/ . At least, if you click privacy Rules it won't toggle the checkbox, but it will if you either press the checkbox OR the label, but not with the anchor. If you need to fire the anchor event only, just call it manually inside the event listener after preventing its default behavior – briosheje May 26 '15 at 18:11
  • @briosheje the Privacy and Contest Rules links just opens a "pop-in" panel with their respective text, there's no alternate behaviors to these links depending on the state of the checkbox (being on/off). Thanks for the tip with preventing the default behavior on the anchor, will give that a shot. – chamberlainpi May 26 '15 at 18:26
  • then you should just open the "modal" (or whatever it is, either a "normal" div o a responsive one or whatever) inside the event listener, after preventing the default action.. That's it :P – briosheje May 27 '15 at 07:23

0 Answers0