如何使用 JavaScript 在 Jekyll 中启用禁用的清单？

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>

Answer 1

There are two important things what I found:

1. Once using getElementsByClassName you should pass the class name only without . , so try instead as .getElementsByClassName('task-list-item-checkbox') .
2. 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!

Answer 2

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); 
});