当`loop`为true时，无法通过其标签切换复选框

Question

当我将loop选项设置为true的旋转木马时，无法单击与之相关的标签来切换复选框。

以下是两种情况的示例：

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>

Answer 1

在document.body中添加点击事件侦听器表明，点击标签会注册两次点击事件。似乎轮播插件也可能使用标签的for属性在复选框上触发了click事件，从而导致立即将checked="checked"变为checked="false"状态。

您可以通过以下方法解决此问题：在input [1]内添加label，然后删除标签的for属性。这样做时，该插件似乎不会触发“双击”事件。

简短回答

更改：

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

收件人：

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

完整答案：

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>