Checklist
Add an optional data-unlock-target
pointing to the ID of a link, to prevent access to that link until all items are ticked.
Basic checklist
<form> <fieldset> <ul class="checklist"> <li class="on"> <input checked="checked" class="checkbox" id="c-999" type="checkbox" /><label for="c-999"><span>Check the degree website.</span></label> </li> <li> <input class="checkbox" id="c0" type="checkbox" /><label for="c0"><span>Check the entry requirements to clarify your eligibility for application, duplicate instructions after to demonstrate a multiline item: Check the entry requirements to clarify your eligibility for application</span></label> </li> <li> <input class="checkbox" id="c1" type="checkbox" /><label for="c1"><span>Ensure you meet the University's language requirements</span></label> </li> <li> <input class="checkbox" id="c2" type="checkbox" /><label for="c2"><span>Apply online or via the hardcopy application form</span></label> </li> </ul> </fieldset> </form>
Unlock checklist
<form> <fieldset> <ul class="checklist" data-unlock-target="continue"> <li class="on"> <input checked="checked" class="checkbox" id="c1-0" type="checkbox" /><label for="c1-0"><span>This one is already ticked</span></label> </li> <li> <input class="checkbox" id="c1-1" type="checkbox" /><label for="c1-1"><span>Please tick both these items</span></label> </li> <li> <input class="checkbox" id="c1-2" type="checkbox" /><label for="c1-2"><span>To unlock the button below</span></label> </li> </ul> </fieldset> <section> <p class="center"> <a class="button" href="javascript:alert('Success!')" id="continue">Continue</a> </p> </section> </form>