jquery - Disabling HTML checkboxes programmatically using Javascript -

i trying optimize todo app made practice.

my goal:

prevent checkbox being checked or unchecked , display alert if .editmode class present. then when edit mode "gone" have program function normally.

my bug is:

while in edit mode, , checkbox clicked, does prevent checkbox being "changed" , does display alert box how want. however, when exit "edit mode", not allow change checkbox ever again.

note: edit mode class applied called: .editmode

i trying write function checks see if .editmode class present, , if present, not allow checkbox checked or unchecked.

---

i wrote code here, works halfway (it doesn't allow checkbox checked if .editmode present, after exit .editmode checkbox still doesn't appear; broke property being present). also, if want apply other areas of code, know need put in function, instead of how have written below abide dry programming.

var taskcompleted = function () {    //list item   var listitem = this.parentnode;    //validation ensure listitem not in edit mode   if ($(listitem).hasclass("editmode")) {      //code prevent checkbox '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 task before marking completed!");      //mark completed code   } else {     console.log("task complete....");     //append task list item #completed-tasks      completedtasksholder.appendchild(listitem);     bindtaskevents(listitem, taskincomplete);   }  } 

here jsfiddle.

i @ loss of how can correctly. can halfway more frustrating knowing how 100% properly.

i know instead of doing code above, should write function like:

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

another issue don't know how 'disable' checkbox without breaking checkbox element permanently. code did write above works, later prevents checkbox ever being checked or changing states.

i suggest you, rather adding editmode class , checking on it, use native disabled attribute of checkbox elements. can disable checkbox when user clicks "edit", , re-enable when clicking on "save".

here's quick example:

// when clicking edit button listitem.queryselector("input[type=checkbox]").disabled = true;  // when clicking save button listitem.queryselector("input[type=checkbox]").disabled = false; 

working jsfiddle here (see lines 84 , 97).