JQuery div toggle checkbox overlapping event-CodePudding

I'm trying to get this event to stop propagating to further down children without any success.

Checkboxes 3,4 and 5 cannot be checked unless clicking the text:

$(document).on("touchend click", ".filter-custom", function() {
    if($(this).children("input").prop("checked") == true){
        $(this).children("input").prop( "checked", false );
        event.stopPropagation();
        event.preventDefault ();
    }else{
        $(this).children("input").prop( "checked", true );
        event.stopPropagation();
        event.preventDefault ();
    }
});

Here is a full example on JSFiddle https://jsfiddle.net/ot9y80jr/1/

CodePudding user response：

Ok this is a workaround your function is overlapping when click on the checkbox it self because the event it's focused on the li element so every click on that elemet cause the uncheck/check of the checkboxes.

This solution works by looking at the event target text if has text he proceed to check/uncheck the checkbox else do nothing without overlapping

$(document).on("touchend click", ".filter-custom", function(event) {
    if($(event.target).text()){
      if($(this).children("input").prop("checked") == true){
          $(this).children("input").prop( "checked", false );
          event.stopPropagation();
          event.preventDefault ();
      }else{
          $(this).children("input").prop( "checked", true );
          event.stopPropagation();
          event.preventDefault ();
      }
   }
});