jQuery selectable() not responding to checkbox ticks

Question

I've got a set of checkboxes which can all be checked/unchecked easily by dragging the mouse over the labels using selectable() plugin. But if I specifically click a checkbox input box instead of its label, nothing happens. I've tried all kinds of combinations using the filter, but nothing seems to work other than using 'label'. I want the behaviour to be the same whether the user drags over the input boxes or the labels. Several hours on this now, please help! Fiddle below.

<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/

so you need a solution using this plugin?? or any solution?? — Mohamed-Yousef, Dec 30 '18 at 21:11

score 1 · Accepted Answer · answered Dec 30 '18 at 21:15

1

The checkbox is another DOM over the div, so you must attach the same event to it like below:

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

DemoL http://jsfiddle.net/86njvLrw/

answered Dec 30 '18 at 21:15

WeiYuan

5,922
2
16
22

I see, and thank you for your explanation. It does make the code long-winded but I understand that there's little alternative if I want to use this plugin. – Silverburch Dec 30 '18 at 22:22

Mohamed-Yousef · Answer 2 · 2018-12-30T21:39:26.870

For Me I wouldn't use the selectable() I'll just use click() event .. Here is how

$('.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>

For reference you can take a look at jQuery difference between change and click event of checkbox

Yes, this is what I had before the plugin. However, the dragging and lasso that's made possible by the plugin is excellent for my particular needs here, so I'd rather stick with it if at all possible. — Silverburch, Dec 30 '18 at 22:25
Its OK @Silverburch if you'll use the plugin for another things .. I posted my answer 1st: I assume that you just need the plugin to do this thing .. 2nd: to let you know another way of how to do this without plugin .. anyways Have a great day :-) — Mohamed-Yousef, Dec 30 '18 at 22:36

jQuery selectable() not responding to checkbox ticks

2 Answers2