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: Checklist ❚ ox-hugo Test Site

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!

I’ve run into the same problem, can I ask you exactly how you solved it?

I downloaded and applied the stack theme: GitHub - CaiJimmy/hugo-theme-stack: Card-style Hugo theme designed for bloggers

I realized that all my checkboxes are not clickable for the user because of the “disabled” tag in the renderer.

I noticed one user mentioned a workaround {{ replace .Content “disabled class” “class” | safeHTML }}, but I don’t know where to put this line of code?