使用Javascript以编程方式禁用HTML复选框

我正在努力优化这个ToDo应用程序，我为实践。

我的目标:

防止复选框被选中或未选中，并在. editmode类存在时显示警告。当编辑模式"消失"时，程序功能正常。

我的bug是:

在编辑模式下，复选框被单击，它阻止复选框被"更改"，它使显示我想要的警告框。然而，当你退出"编辑模式"时，它不允许再对复选框进行任何更改。

注释:编辑模式是一个应用的类，称为:.editMode

我正试图写一个函数来检查.editMode类是否存在，然后如果它存在，不允许复选框被选中或未选中。

---

我在这里写了这段代码，但它只工作了一半(如果.editMode存在，它不允许复选框被选中，但是在你退出.editMode后，复选框仍然不出现;就像我破坏了财产一样)。同样，如果我想把它应用到我代码的其他地方，我知道我需要把它放在一个函数中，而不是像我下面写的那样遵守编程。

var taskCompleted = function () {
  //List Item
  var listItem = this.parentNode;
  //Validation to ensure listitem is NOT in edit mode
  if ($(listItem).hasClass("editMode")) {
    //code to prevent checkbox from 'checking'
    $('input[type="checkbox"]').click(function (event) {
      //Checkbox Varible
      var $checkbox = $(this);
      setTimeout(function () {
        $checkbox.removeAttr('checked');
      }, 0);
      event.preventDefault();
      event.stopPropagation();
    });
    alert("Finish editing the task before marking as completed!");
    //Mark as completed code
  } else {
    console.log("Task Complete....");
    //append the task list item to the #completed-tasks
    completedTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskIncomplete);
  }
}

这是一个JSFiddle。

我真不知道怎样才能正确地做这件事。我可以做一半，这几乎比知道如何100%正确地做更令人沮丧。

我知道我应该写一个函数，而不是做上面的代码:

function isEditMode(){
if(edit mode present){
//prevent checkbox from being checked
//display prompt to exit exit mode
}
else {
return true
}

另一个问题是我不知道如何"禁用"复选框而不会永久破坏该复选框元素。我上面写的代码可以工作，但是后来阻止了复选框被选中或改变状态。

// When clicking the edit button
listItem.querySelector("input[type=checkbox]").disabled = true;
// When clicking the save button
listItem.querySelector("input[type=checkbox]").disabled = false;