mardi 18 juin 2019

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

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)?




Aucun commentaire:

Enregistrer un commentaire