jQuery - toggling class on label/input breaks after fast clicks

Question

I've got weird problem with my checkboxes.

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 link: https://jsfiddle.net/orddstgo/2/

It's just "custom" checkbox (pretend that normal checkbox is hidden, it's just for debugging process). When I click label/box it works correctly. Green is checked, red is unchecked. Problem is when I click label (text) and then space on the left fast enough. Sometimes it flips and "active" class is not assigned correctly.

Here's animation that shows the problem: https://gfycat.com/BraveExcitableAdamsstaghornedbeetle

I've tried logging every click to check if there's no double clicks registering but no.

Thanks in advance.

score 0 · Answer 1 · answered Mar 15 '17 at 12:23

0

Try detecting the change event of the input element, then test if the element is checked and add/remove 'active' class based on this.

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');
})

answered Mar 15 '17 at 12:23

Davey

2,355
1
17
18

Thanks, it's still buggy sometimes but at least it fixes after another click. – Hybrid20 Mar 15 '17 at 13:58
If this is still buggy, I would suggest doing what you're trying to achieve without javascript/jquery, research 'pure css checkbox'. In brief: if you move the label element after the input element, you can make use of the checked selector `input:checked` and sibling selector `+` to style the label (or a pseudo element of the label). – Davey Mar 15 '17 at 14:35
Unfortunately I cannot move anything in the HTML structure because of the framework used by programmers. I think this solution is enough, thank you. – Hybrid20 Mar 15 '17 at 17:50

score 0 · Answer 2 · answered Mar 15 '17 at 12:31

0

I think there is a mismatch in checked state while you are clicking

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

Try using this.

answered Mar 15 '17 at 12:31

Stenal P Jolly

737
9
20

Unfortunately this did not help. Thanks for suggestion though. – Hybrid20 Mar 15 '17 at 13:57
I've still managed to make it bug like in my example - red square with checkbox checked. – Hybrid20 Mar 20 '17 at 11:14
By clicking the checkbox directly? – Stenal P Jolly Mar 20 '17 at 11:40
No, checkbox in my project is hidden. On my fiddle it's only for "debugging" process. By clicking label and then on left side with fake colored chechbox. Effect is the same as in my gif in first post - https://gfycat.com/BraveExcitableAdamsstaghornedbeetle – Hybrid20 Mar 20 '17 at 11:44

jQuery - toggling class on label/input breaks after fast clicks

2 Answers2