Checkbox button doesn't work when you click quickly multiple times

This is a bug in Firefox. See Bug 608180 - double / quick click on a checkbox label does not work as expected

IE has historical reasons (but fixed in later versions), a listenable event model that skips events twice, mousedown

and click

. See bug 263 - Beware of DoubleClick in IE .

I created a plugin that fixes some bugs in jQuery UI button widgets and also working on Firefox bug recently, it shouldn't be hard to adapt it to your non jQuery UI buttons.

Extracted the important part and adapted it for nested checkboxes inside label

s:

(function () {
    var mdtarg, //last label mousedown target
        mdchecked, //checked property when mousedown fired
        fixedLabelSelector = '.fixedLabelCheckbox'; //edit as you see fit
    $(document).on('mousedown', fixedLabelSelector, function (e) {
        //only left clicks will toggle the label
        if (e.which !== 1) return;
        mdtarg = this;
        mdchecked = this.control ? this.control.checked : $(this).find('input')[0].checked;
        //reset mdtarg after mouseup finishes bubbling; prevents bugs with
        //incorrect mousedown-mouseup sequences e.g.
        //down IN label, up OUT, down OUT, up IN
        $(document).one('mouseup', function () {
            mdtarg = null;
        });
    }).on('mouseup', fixedLabelSelector, function (e) {
        if (e.which !== 1) return;
        if (mdtarg === this) {
            var ch = this.control || $(this).find('input')[0];
            //the click event is supposed to fire after the mouseup so
            //we wait until mouseup and click finish bubbling and check if it
            //had the desired effect
            setTimeout(function () {
                if (mdchecked === ch.checked) {
                    //else patch it manually
                    ch.checked = !ch.checked;
                    $(ch).change();
                }
            }, 0);
        }
    });
}());

      

        
        
        
      

    

Fiddle tested in Firefox.

You must add a class fixedLabelCheckbox

to all labels containing checkboxes that you want to fix with the code above.

It will work no matter where you put the script, and also sets dynamically added checkboxes if the label has an appropriate delegated class / selector.

Please note that if you are using other libraries this may not trigger jQuery related change handlers.

If you don't want to add additional classes to your markup, you can use this version (more code and less performance):

(function ($) {
    function getControl(lbl) { //fallback for non-HTML5 browsers if necessary
        return lbl.control || (lbl.htmlFor ? $('input[id="'+lbl.htmlFor+'"]')[0] : $(lbl).find('input')[0]);
    }
    var mdtarg, //last label mousedown target
        mdchecked; //checked property when mousedown fired
    $(document).on('mousedown', 'label', function (e) {
        //only left clicks will toggle the label
        if (e.which !== 1) return;
        var ch = getControl(this);
        if (!ch || ch.type !== 'checkbox') return;
        mdtarg = this;
        mdchecked = ch.checked;
        //reset mdtarg after mouseup finishes bubbling; prevents bugs with
        //incorrect mousedown-mouseup sequences e.g.
        //down IN label, up OUT, down OUT, up IN
        $(document).one('mouseup', function () {
            mdtarg = null;
        });
    }).on('mouseup', 'label', function (e) {
        if (e.which !== 1) return;
        if (mdtarg === this) {
            var ch = getControl(this);
            //the click event is supposed to fire after the mouseup so
            //we wait until mouseup and click finish bubbling and check if it
            //had the desired effect
            setTimeout(function () {
                if (mdchecked === ch.checked) {
                    //else patch it manually
                    ch.checked = !ch.checked;
                    $(ch).change();
                }
            }, 0);
        }
    });
}(jQuery));

      

        
        
        
      

    

Fiddle

As you can see from the above code, this version should work with both the label attribute for

and nested inputs inside the label, without adding any additional markup.

About disabling selection: you can put user-select

in CSS as mentioned in your question, or if browsers that don't support user-select

also apply, apply this answer on all shortcuts you want to disable.