JQuery div 切换复选框重叠事件

Question

我试图让这个事件停止传播到更远的地方 children 但没有成功。

除非单击文本，否则无法选中复选框 3、4 和 5：

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

这是 JSFiddle 上的完整示例 https://jsfiddle.net/ot9y80jr/1/

Answer 1

好的，这是一个变通方法，当您点击复选框时，您的函数会重叠，因为事件集中在 li 元素上，所以每次点击该元素都会导致 uncheck/check 复选框。

此解决方案的工作原理是查看事件目标文本，如果有文本，他会继续check/uncheck复选框，否则不重叠就什么都不做

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

JQuery div 切换复选框重叠事件

JQuery div toggle checkbox overlapping event

jquery

events