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

Question

我只需要一个在呈现时可以点击的复选框。似乎如果我使用降价创建一个复选框，它不提供切换它的选项。

杰基尔

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

我尝试使用 JavaScript，但它似乎不起作用。

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

我发现了两件重要的事情：

使用 getElementsByClassName 后，您应该只传递 class 名称，而不要使用 .，因此请尝试使用 .getElementsByClassName('task-list-item-checkbox').
根据定义 getElementsByClassName() 不只是 return 一项，而是：

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

根据我的评论，您可以尝试以下操作：

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>

我认为上面提到的代码片段让您知道一旦您想从 input 元素中删除 disable class 从哪里开始。

希望对您有所帮助！

Answer 2

以防万一以后有人遇到这个问题，使用 JQuery 也可以。

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

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

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

html

javascript

css

liquid

jekyll