jQuery selectable () не отвечает на флажки - PullRequest
Новая
       31

jQuery selectable () не отвечает на флажки

0 голосов
/ 30 декабря 2018

У меня есть набор флажков, которые можно легко отметить или снять, перетаскивая мышь над ярлыками с помощью плагина 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/

Ответы [ 2 ]

0 голосов
/ 31 декабря 2018

Для меня Я бы не использовал 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 разницу между изменением и событием щелчка флажка

0 голосов
/ 31 декабря 2018

Флажок является еще одним DOM над div, поэтому вы должны прикрепить к нему то же событие, как показано ниже: 

$("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/

...