Question

我正在尝试优化我为练习制作的ToDo应用。

我的目标：

阻止选中或取消选中复选框，并在存在.editMode类时显示警告。然后当编辑模式为＆＃34;已消失＆＃34;程序功能正常。

我的错误是：

在修改模式下，点击该复选框后，会阻止该复选框被更改＆＃34;它确实显示我想要的警告框。但是，当您退出＆＃34;编辑模式＆＃34;时，它不允许再次对复选框进行任何更改。

注意：编辑模式是一个名为.editMode

的应用类

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

我在这里编写了这段代码，但它只在中途工作（如果.editMode存在，则不允许选中复选框，但在退出.editMode后，复选框仍然没有＃39; t出现;就像我打破财产一样存在）。另外，如果我想将其应用到我的代码的其他区域，我知道我需要将它放在一个函数中，而不是我在下面编写它以遵守 dry 编程。

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
}

另一个问题是我不知道如何禁用＆＃39;复选框不会永久破坏该复选框元素。我上面写的代码有效，但后来阻止了EVER的复选框被检查或改变状态。

Answer 1

我建议你使用复选框元素的原生editMode属性，而不是添加disabled类并检查它。您可以在用户点击“修改”时轻松禁用该复选框，并在点击“保存”时重新启用它。

这是一个简单的例子：

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

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

使用JSFiddle here（见第84和97行）。

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

我的目标：

我的错误是：

1 个答案: