How do I enable a disabled checklist in Jekyll using JavaScript?

Question

I just need a checkbox that is clickable when rendered. It seems as though if I create a checkbox using markdown, it does not offer the option to toggle it.

Jekyll

- [ ] Mercury
- [ ] Venus
- [ ] Earth

I tried using JavaScript but it doesn't seem to be working.

JS

const checkbox = document.getElementsByClassName(".task-list-item-checkbox");
checkbox.removeAttribute("disabled");

HTML

<ul class="task-list">
    <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled">Mercury</li>
    <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled">Venus</li>
    <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled">Earth</li>
</ul>

`getElementsByClassName` returns a list of elements so try to iterate through the result. Probably [JS: iterating over result of getElementsByClassName using Array.forEach](https://stackoverflow.com/questions/3871547/js-iterating-over-result-of-getelementsbyclassname-using-array-foreach) will help. — norbitrial, May 18 '20 at 17:31

score 1 · Accepted Answer · answered May 18 '20 at 18:27

There are two important things what I found:

Once using getElementsByClassName you should pass the class name only without ., so try instead as .getElementsByClassName('task-list-item-checkbox').
By definition getElementsByClassName() does not return only one item but instead:

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s).

Based on my comment you can try as the following:

const checkboxes = document.getElementsByClassName('task-list-item-checkbox');

Array.prototype.forEach.call(checkboxes, function (e) {
  e.removeAttribute('disabled');
});

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled">Mercury</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled">Venus</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled">Earth</li>
</ul>

I think the above mentioned code snippet gives you the idea where to start once you want to remove disable class from your input elements.

I hope this helps!

JamesRocky · Answer 2 · 2020-05-18T18:38:03.340

0

Just in case anyone comes across this in the future, using JQuery works as well.

$(document).ready(function(){
   $('.task-list-item-checkbox').prop("disabled", false); 
});

edited May 18 '20 at 18:38

answered May 18 '20 at 18:28

JamesRocky

721
9
23

How do I enable a disabled checklist in Jekyll using JavaScript?

2 Answers2