jQuery UI Checkbox Widget

Creating a checkbox widget using button widgets.

by definef

HTML

<div>
    <input id="sm" type="checkbox"/>
    
</div>
<div>
    <input id="md" type="checkbox"/>
    <label for="check" class="ui-widget">Medium</label>
</div>
<div>
    <input id="lg" type="checkbox"/>
    <label for="check" class="ui-widget">Large</label>
</div>

CSS

body {
    font-size: 0.8em;
}

/* Specific checkbox widget styles */
.ui-checkbox {
    font-size: 0.75em;
    margin: 0.6em;
}

JavaScript

(function( $ ) {
    
    $.widget( "app.checkbox", {
    
        _create: function() {

            // Call the default widget constructor first.            
            this._super();
            
            // Hide the HTML checkbox, then insert our button.
            this.element.addClass( "ui-helper-hidden-accessible" );
            this.button = $( "<button/>" ).insertAfter( this.element );
            
            // Configure the button by adding our widget class,
            // setting some default text, default icons, and such.
            // The create event handler removes the title attribute,
            // because we don't need it.
            this.button.addClass( "ui-checkbox" )
                       .text( "checkbox" )
                       .button({
                           text: false,
                           icons: { 
                               primary: "ui-icon-blank"
                           },
                           create: function( e, ui ) {
                               $( this ).removeAttr( "title" ); 
                           }
                       });
            
            // Listen for click events on the button we just inserted and
            // toggle the checked state of our hidden checkbox.
            this._on( this.button, {
                click: function( e ) {
                    this.element.prop( "checked", !this.element.is( ":checked" ) );
                    this.refresh();
                }
            });
            
            // Update the checked state of the button, depending on the
            // initial checked state of the checkbox.
            this.refresh();
            
        },
        
        _destroy: function() {
            
            // Standard widget cleanup.
            this._super();
            
            // Display the HTML checkbox and remove the button.
            this.element.removeClass( "ui-helper-hidden-accessible" );
            this.button.button(...