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

Continue

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