Replaces checkboxes with a stylable jQuery UI widget.

jquery.ui.checkbox.js

/*!
* jquery.ui.checkbox.js - v 0.1 (2013-07-10)
* Copyright (C) 2013 by Adam Ydenius ([email protected]) | http://mollwe.se
* Dual licensed under MIT and GPL.
*/
/* 
* Replaces checkboxes with a stylable jQuery UI widget.
* 
* Inputs that has been enabled with this plugin has class "ui-checkbox-target".  
*
* To enable plugin call checkbox on the elements you would like to transform.
* Example: $("input:checkbox:not(.no-ui-checkbox)").checkbox();
*
* Dependencies: 
*   jquery
*   jquery.ui
*/
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery', 'jquery-ui'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.widget("ui.checkbox", {
        _create: function () {
            var that = this,
                tabindex = this.tabindex = this.element.attr("tabindex"),
                checkbox = this.element.attr("tabindex", -1).addClass("ui-checkbox-target ui-helper-hidden-accessible"),
                checked = checkbox.is(":checked"),
                wrapper = this.wrapper = $("<span>")
                    .addClass("ui-checkbox ui-widget ui-state-default ui-corner-all")
                    .css({
                        margin: checkbox.css("margin"),
                        display: "inline-block",
                        background: "white"
                    })
                    .attr("tabindex", tabindex || 0)
                    .insertAfter(checkbox),
                icon = $("<span>").addClass("ui-icon ui-icon-check").appendTo(wrapper);

            wrapper.on({
                "click.ui-checkbox": function () {
                    checkbox.click();
                },
                "mouseenter.ui-checkbox": function () {
                    if(!wrapper.is(".ui-state-disabled"))
                        wrapper.addClass("ui-state-hover");
                },
                "mouseleave.ui-checkbox": function () {
                    wrapper.removeClass("ui-state-hover");
                },
                "keyup.ui-checkbox": function(event) {
                    if (event.keyCode === 32 || event.keyCode === 13) {
                        checkbox.click();
                        event.preventDefault();
                        event.stopPropagation();
                    }
                },
                "keydown.ui-checkbox": function(event) {
                    if (event.keyCode === 32 || event.keyCode === 13) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                },
                "focusin.ui-checkbox": function () {
                    wrapper.addClass("ui-state-focus");
                },
                "focusout.ui-checkbox": function () {
                    wrapper.removeClass("ui-state-focus");
                }
            });

            function update() {
                var checked = checkbox.is(":checked"),
                    disabled = checkbox.is(":disabled");

                wrapper.toggleClass("ui-state-active", checked);
                icon.css("visibility", checked ? "visible" : "hidden");

                if (disabled)
                    that.disable();
                else
                    that.enable();
            }

            checkbox.on("change.ui-checkbox", update);
                    
            update();
        },
        disable: function(){
            this.wrapper.addClass("ui-state-disabled");
            this.element.prop("disabled", true);
            this.wrapper.attr("tabindex", -1);
        },
        enable: function(){
            this.wrapper.removeClass("ui-state-disabled ui-state-hover");
            this.element.prop("disabled", false);
            this.wrapper.attr("tabindex", this.tabindex || 0);
        },
        toggle: function (checked) {
            if (typeof checked === "boolean") {
                this.element.prop("checked", checked).change();
            }
            else {
                this.element.click();
            }
        },
        refresh: function () {
            
        },

        destroy: function () {
            this.wrapper.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });

}));