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"); } }; }());