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

Question

我有一组复选框，通过使用 selectable() 插件将鼠标拖到标签上，可以很容易地 checked/unchecked 设置这些复选框。但是，如果我专门单击一个复选框输入框而不是其标签，则什么也不会发生。我已经使用过滤器尝试了各种组合，但除了使用 'label' 之外似乎没有任何效果。无论用户拖动输入框还是标签，我都希望行为相同。现在几个小时了，请帮忙！ Fiddle 下面。

<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

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

jQuery selectable() not responding to checkbox ticks

jquery

jquery-ui-selectable