Click of a link nested in a label does not trigger checkbox check

user_7251482 0
Viewed 84

If you have a link nested in a label element, clicking the link does not update state of the associated checkbox. Tested in recent Firefox and Chrome. This used to work 100% – I personally used this approach long time ago; also there are numerous topics on how to prevent the old behavior from happening.

I think that this has something related to GDPR maybe. A lot of cases where you put a checkbox agreement and a link to T&C for example, clicking on the link to open the T&C doc was checking the checkbox, while you may not agree with the conditions.

I have searched for any information when/why this was introduced as well as for potential workarounds, but I was not able to find anything.

<label>
   <input type="checkbox" />
   <!-- click here will toggle the checkbox -->
   I agree with
   <a href="terms">
      <!-- however, click here will NOT toggle the checkbox -->
      Terms & Conditions
   </a>
</label>

This used to work before. As I said, most probably this was adopted by most vendors in order to patch the undesired effect of opening T&C for reading and "agreeing" at the same time with them. Unfortunately I was unable to find any proof for that.

Anyone having some info? Any workaround in plain HTML (no JS)?

checkbox html
1 Answers

Had the same issue and have found out that you couldn't solve it correct because of links are made only for navigation but not for checkboxing. Browser wants go throw the link first instead filling checkbox. You can write the link outside you checking area.

user_105231930
Related