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>