如何使用 JavaScript 在 Jekyll 中啟用禁用的清單？

Question

我只需要一個渲染時可點擊的復選框。 好像我使用 markdown 創建了一個復選框，但它不提供切換它的選項。

傑基爾

- [ ] 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

我發現了兩件重要的事情：

1. 使用getElementsByClassName后，您應該只傳遞 class 名稱而不傳遞. ，所以嘗試改為.getElementsByClassName('task-list-item-checkbox') 。
2. 根據定義getElementsByClassName()不只返回一項，而是：

Document 接口的getElementsByClassName方法返回一個類似數組的 object，其中包含所有具有給定 class 名稱的所有子元素。

根據我的評論，您可以嘗試以下操作：

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