jQuery selectable() 不响应复选框勾选

Question

我有一组复选框，可以通过使用 selectable() 插件将鼠标拖到标签上轻松地选中/取消选中它们。但是，如果我专门单击复选框输入框而不是其标签，则不会发生任何事情。我已经使用过滤器尝试了各种组合，但除了使用“标签”之外似乎没有任何效果。无论用户拖动输入框还是标签，我都希望行为相同。现在有几个小时了，请帮忙！下面摆弄一下。

<form>
 <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" /> </label>
  <label>Check 4<input type="checkbox" id="chk4" /> </label>

 </div>
</form>



$(".myBoxes").selectable({

  filter: 'label',

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

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

    });
  }
});



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

label.ui-selecting {
  background: lightgreen;
}

.LabelHighlight {
  background: lightgreen;
}

http://jsfiddle.net/y7xk032m/

Answer 1

复选框是 div 上的另一个 DOM，因此您必须将相同的事件附加到它，如下所示：

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

演示http://jsfiddle.net/86njvLrw/

Answer 2

对我来说我不会使用selectable() 我只会使用click() 事件.. 方法如下

$('.myBoxes label').on('click' , function(e){
    $("input:checkbox" , this).change();
});
$("input:checkbox").on("click" , function(e){
    $(this).closest('label').toggleClass("LabelHighlight");
});

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

label.ui-selecting {
  background: lightgreen;
}

.LabelHighlight {
  background: lightgreen;
}

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

<form>
  <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" /> </label>
    <label>Check 4<input type="checkbox" id="chk4" /> </label>

  </div>
</form>

您可以参考jQuery difference between change and click event of checkbox