Question

我在复选框标签内有一个链接。它的工作原理是，我可以独立于链接打勾/取消勾打复选框，反之亦然。当我引入jquery selectable（）插件时，就会出现问题。在此位置上，单击链接将激活复选框而不是链接。我玩过过滤器，但没有任何效果。我也尝试为整个代码构造一个有条件的onclick，但同样没有用。我现在想知道selectable（）是否会引起特殊的困难，这使我不胜其烦。如果可能的话，我想保留该插件，因此不胜感激。小提琴在下面。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>


<div class='myBoxes'>

  <label>Check 1<input type="checkbox" id="chk1" /> </label>
  <label>Check 2<input type="checkbox" id="chk2" /> </label>
  <label>Check 3<input type="checkbox" id="chk3" /><span onclick="event.stopPropagation();"><a href='#' id='notes' >Notes...</a></span></label>
  <label>Check 4<input type="checkbox" id="chk4" /> </label>

</div>



$("#notes").click(function(event) {
  event.preventDefault();
  alert('In the notes link');
})


$("input[type='checkbox']").click(function(event) {
  if ($(this).is(':checked')) {
    $(this).parent().addClass("LabelHighlight")
  } else {
    $(this).parent().removeClass("LabelHighlight")
  }
});


$(".myBoxes").selectable({

  filter: 'label',

  stop: function() {
    $(".ui-selected input", this).each(function() {
      this.checked = !this.checked;

      if ($(this).is(':checked')) {
        $(this).parent().addClass("LabelHighlight")
      } else {
        $(this).parent().removeClass("LabelHighlight")
      }

    });
  }
});



label {
  display: block;
  padding: 7px;
  width: 150px;
  margin-bottom: 14px;
  border: 1px solid red;
}

label.ui-selecting {
  background: lightgreen;
}

.LabelHighlight {
  background: lightgreen;
}

#notes {
  float: right;
  color: #1798da;
  position: relative;
  margin-top: 2px;
}

提琴：http://jsfiddle.net/n8w7Ld3v/

.selectable（）操作时如何激活复选框标签内的链接

0 个答案: