Rendering Enabled Checkboxes

I’m doing a POC for a new project and am hopeful to build some static checklists using Hugo. So far, it is working pretty well, but the checkboxes from markdown always render as disabled. Is there a way to remove the “disabled” tag at render?

Here is a sample of Markdown:

- [ ] item 1
- [ ] item 2
- [ ] item 3

Here is an example of the rendered result:

<input type="checkbox" disabled class="task-list-item">

Any suggestions on how to enable these checkboxes?

You can use replace to remove the disabled attribute.

Something like {{ replace .Content "disabled class" "class" | safeHTML }} should do the trick.

1 Like

It’s not clear what you mean. If a check box is not checked, it’s disabled. Check it with X to enable.

Here’s an example: https://ox-hugo.scripter.co/test/posts/checklist/

The link to the Markdown source of that is on that page.

This did the trick nicely! Thanks!

FYI, you have confused disabled for checked.

“checked” is used to indicate the value of box is true.

“disabled” prevents the user from changing the value of the box (check or uncheck).

Regardless, thanks for the response!