How to make list checkboxes clickable on Jekyll/Hugo/Github Pages

Why I make this?

On the Data for Education Systems website, we thought of adding some checklists as a resource for our users. Since that site is made wit Jekyll, kramdown (or GitHub flavoured markdown (GFM)) automatically renders the list checkboxes from Markdown. But they are not clickable by default.

I thought it’d be nice if the checkboxes were clickable so the users could just load the page and click on the checkboxes to mark them as done. Here’s a snippet of how I got that done.

What it look like?

By default, even this Hugo site doesn’t render the checkboxes as clickable. See –

• Here’s a checklist item
• How to make Jekyll/Github Pages list checkboxes clickable
• World Domination

For some reason it even renders the • bullet points. Here’s what this would look like with the code snippet below –

1. Here’s a checklist item
2. How to make Jekyll/Github Pages list checkboxes clickable
3. World Domination

How to do this?

1
2
3
4
5
6

// Clickable checkboxes
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
  // remove the disabled attribute; added by kramdown by default
  checkbox.removeAttribute('disabled');
});

Simple!