Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I am trying to optimize this ToDo app I made for practice.

My goal:

Prevent checkbox from being checked or unchecked and display an alert if .editMode class is present. Then when edit mode is "gone" have the program function normally.

My bug is:

While in edit mode, and the checkbox is clicked, it does prevent the checkbox from being "changed" and it does display an alert box how I want. However, when you exit "edit mode", it does not allow any change to the checkbox ever again.

Note: edit mode is a class applied called: .editMode

I am trying to write a function that checks to see if the .editMode class is present, and then if it is present, not allow the checkbox to be checked or unchecked.


I wrote this code here, but it only works halfway (it doesn't allow the checkbox to be checked if .editMode is present, but then after you exit .editMode the checkbox still doesn't appear; like I broke the property from being present). Also, if I want to apply this to other areas of my code, I know I need to put it in a function, instead of how I have it written below to abide by dry programming.

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

}

Here is a JSFiddle.

I am really at a loss of how I can do this correctly. I can do it halfway which is almost more frustrating than knowing how to do it 100% properly.

I know instead of doing the code above, I should write a function like:

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

Another issue is I don't know how to 'disable' the checkbox without breaking that checkbox element permanently. The code I did write above works, but then later prevents the checkbox from EVER being checked or changing states.

share|improve this question
up vote 2 down vote accepted

I would suggest you, rather than adding an editMode class and checking on it, to use the native disabled attribute of checkbox elements. You can easily disable the checkbox when the user clicks "Edit", and re-enable it when clicking on "Save".

Here's a quick example:

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

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

Working JSFiddle here (see lines 84 and 97).

share|improve this answer
    
Utterly amazing. Thank you for the simple fix. I was thinking WAY to complicated. – jward01 Aug 17 at 0:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.