CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
jward01
jward01

Reputation: 759

Disabling HTML checkboxes programmatically using Javascript

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.

Upvotes: 2

Views: 1126

Answers (1)

Marco Bonelli
Marco Bonelli

Reputation: 69387

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).

Upvotes: 4

Related Questions