JQuery Custom Checkbox Example | Checkbox Customization

It's easy to customize checkbox.

if (app === undefined) var app = {};
app.customCheckBox = (function() {
    var prop = null;

    function base() {
        if (!prop) {
            prop = $.prototype.prop;
            $.prototype.prop = function() {
                var elem = $(this), result = prop.apply(this, arguments);
                if (elem.is(".custom-checkbox-base-element")) {
                    elem.trigger("update_view");
                }
                return result;
            };
        }
    }

    return {
        convert: function(page) {
            base();

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').each(function() {
                var cb = $(this);
                cb.after("<span class='custom-checkbox-selection'></span>");
                if (cb.is(":checked")) cb.next().addClass("selected");
                cb.hide();
            });

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').change(function() {
                var cb = $(this);
                cb.next().trigger("update_view");
            });

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').on("update_view", function() {
                $(this).next().trigger("update_view");
            });

            page.find(".custom-checkbox-selection:not(.complete-event-compile)").click(function() {
                var elem = $(this), cb = elem.prev();
                if (elem.is(".selected")) {
                    elem.removeClass("selected").trigger("update_view");
                    cb.prop("checked", false).trigger("change");
                }
                else {
                    elem.addClass("selected").trigger("update_view");
                    cb.prop("checked", true).trigger("change");
                }
            });

            page.find('.custom-checkbox-selection:not(.complete-event-compile)').on("update_view", function() {
                var elem = $(this), cb = elem.prev();
                if (cb.is(":checked")) {
                    elem.addClass("selected");
                }
                else {
                    elem.removeClass("selected");
                }
            });
            page.find(".custom-checkbox-selection").addClass("complete-event-compile");
            page.find('input[type="checkbox"]').addClass("custom-checkbox-base-element");
        }
    };
}());

JSFiddle link for checkbox customization

jQuery check a checkbox without firing a change event

You should suspend events before set the value and resume events after this. For example:

myCheckBox.suspendEvents(false); // Stop all events. 
//Be careful with it. Dont forget resume events!
myCheckBox.setValue(!myCheckBox.getValue()); // invert value
myCheckBox.resumeEvents(); // resume events