Can't toggle checkbox through its label when `loop` is true

Question

When I make my carousel with the loop option set to true it's impossible to toggle a checkbox clicking on the label associated with it.

Here's an example with both situations:

let $carousel = $('.owl-carousel');

$carousel.owlCarousel({
  items: 1,
  loop: true,
});

document
  .querySelector('#btnReloadWithoutLoop')
  .addEventListener('click', function() {
    $carousel.data('owl.carousel').options.loop = false;
    $carousel.trigger('refresh.owl.carousel');
  });

document
  .querySelector('#btnReloadWithLoop')
  .addEventListener('click', function() {
    $carousel.data('owl.carousel').options.loop = true;
    $carousel.trigger('refresh.owl.carousel');
  });

* {
  font-family: sans-serif;
}

.owl-carousel .item {
  border: 1px solid #ccc;
  max-width: 400px;
  margin: auto;
  padding: 20px;
}

.owl-carousel .item label {
  transition: text-shadow .15s ease-in-out;
}

.owl-carousel .item input[type="checkbox"]:checked+label {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.btn-group {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}

.btn-group>button+button {
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
  <div class="item">
    <form>
      <input type="checkbox" name="test" id="test-checkbox">
      <label for="test-checkbox">Test label</label>
    </form>
  </div>
  <div class="item">
    <form>
      <input type="checkbox" name="test" id="test-checkbox-2">
      <label for="test-checkbox-2">Test label</label>
    </form>
  </div>
</div>

<div class="btn-group">
  <button id="btnReloadWithoutLoop">
    Reload WITHOUT the loop option
  </button>
  <button id="btnReloadWithLoop">
    Reload WITH the loop option
  </button>
</div>

Just wondering did my answer help? – Gary Thomas Jan 31 '19 at 11:50 — Gary Thomas, Jan 31 '19 at 11:50

score 0 · Answer 1 · answered Jan 28 '19 at 19:33

Adding a click event listener to the document.body shows that clicking on the label registers two click events. It seems as though the carousel plugin may be firing a click event on the checkbox also, using the for attribute of the label, causing an immediate checked="checked" to checked="false" state.

You can work around this by adding the input inside the label [1], and removing the label's for attribute. The plugin doesn't appear to trigger a "double" click event when doing so.

Short Answer

Change:

<form>
    <input type="checkbox" name="test" id="test-checkbox">
    <label for="test-checkbox">Test label</label>
</form>

To:

<form>
    <label>
        <input type="checkbox" name="test" id="test-checkbox-2">
        Test label
    </label>
</form>

Full Answer:

let $carousel = $('.owl-carousel');

$carousel.owlCarousel({
  items: 1,
  loop: true,
});

document
  .querySelector('#btnReloadWithoutLoop')
  .addEventListener('click', function() {
    $carousel.data('owl.carousel').options.loop = false;
    $carousel.trigger('refresh.owl.carousel');
  });

document
  .querySelector('#btnReloadWithLoop')
  .addEventListener('click', function() {
    $carousel.data('owl.carousel').options.loop = true;
    $carousel.trigger('refresh.owl.carousel');
  });

* {
  font-family: sans-serif;
}

.owl-carousel .item {
  border: 1px solid #ccc;
  max-width: 400px;
  margin: auto;
  padding: 20px;
}

.owl-carousel .item label {
  transition: text-shadow .15s ease-in-out;
}

.owl-carousel .item input[type="checkbox"]:checked+label {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.btn-group {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}

.btn-group>button+button {
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
  <div class="item">
    <form>
      <label>
        <input type="checkbox" name="test" id="test-checkbox">
        Test label
      </label>
    </form>
  </div>
  <div class="item">
    <form>
      <label>
        <input type="checkbox" name="test" id="test-checkbox-2">
        Test label
      </label>
    </form>
  </div>
</div>

<div class="btn-group">
  <button id="btnReloadWithoutLoop">
    Reload WITHOUT the loop option
  </button>
  <button id="btnReloadWithLoop">
    Reload WITH the loop option
  </button>
</div>

Can't toggle checkbox through its label when `loop` is true

1 Answers1