jQuery - 快速点击后标签/输入中断的切换类

Question

我的复选框有奇怪的问题。

HTML:

<div class="f-checkbox">
    <label class="f-label" for="f-field">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cumque 
    voluptatem nisi incidunt praesentium quibusdam sit in alias velit 
    consectetur facere amet voluptates possimus, aliquid nam omnis fugit eum 
    molestias ucimus, saepe laboriosam, enim nobis. Omnis eveniet rem 
    impedit,commodi mollitia assumenda beatae nulla consequuntur autem debitis 
    fugiat voluptatem laudantium!
</label>

<input type="checkbox" id="f-field" name="f-field" value="1" aria-invalid="false">

</div>

JS:

jQuery('.f-checkbox label').on('click', function(e){
    jQuery(this).parent('.f-checkbox').toggleClass('active');
    console.log('Test');
})

fiddle 链接:https://jsfiddle.net/orddstgo/2/

它只是“自定义”复选框(假装普通复选框被隐藏，它只是为了调试过程)。当我单击标签/框时，它可以正常工作。绿色选中，红色未选中。问题是当我单击标签(文本)然后足够快地单击左侧空间时。有时它会翻转并且“事件”类未正确分配。

这是显示问题的动画:https://gfycat.com/BraveExcitableAdamsstaghornedbeetle

我尝试记录每次点击以检查是否没有注册双击但没有。

提前致谢。

Answer 1

尝试检测输入元素的变化事件，然后测试元素是否被选中，并根据此添加/删除“事件”类。

jQuery('.f-checkbox label').on('click', function(e){
  if (jQuery(this).sibling('input').prop('checked')) {
    jQuery(this).parent('.f-checkbox').addClass('active');
  } else {
    jQuery(this).parent('.f-checkbox').removeClass('active');
  }
  console.log('Test');
})