Как активировать ссылку внутри метки флажка, когда работает .selectable () - PullRequest
Новая
       35

Как активировать ссылку внутри метки флажка, когда работает .selectable ()

0 голосов
/ 05 января 2019

У меня есть ссылка внутри метки флажка. Это работает в том, что я могу поставить галочку / снять галочку независимо от ссылки, и наоборот. Проблема возникает, когда я представляю плагин jquery selectable (). При этом нажатие на ссылку активирует флажок вместо ссылки. Я играл с фильтром, но ничего не работает. Я также пытался создать условный щелчок для всего кода, но опять не получилось. Теперь мне интересно, вызывает ли 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/

...