jsFiddle

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

var CheckedListBox = new Class({
    Implements: [Options],

    options: {
        replaceOriginal: false
    },

    initialize: function(input, opt)
    {
        // we need select element with mutliple enabled
        if(input.get("tag") == "select" && $chk(input.get("multiple")) )
        {
            this.setOptions(opt);

            var aliasOptions = $A(input.options).map(function(el){

                var chb = new Element("input", {
                    type: "checkbox",
                    checked: el.selected
                });

                if(this.options.replaceOriginal)
                {
                    chb.setProperties({
                        value: el.value,
                        name: input.name
                    }).addEvent("change", function(){
                        this.checked ? this.getParent("label").addClass("cidsi-checked") : this.getParent("label").removeClass("cidsi-checked");
                    });
                }else{
                    chb.addEvent("change", function(){
                        el.selected = this.checked;
                        this.checked ? this.getParent("label").addClass("cidsi-checked") : this.getParent("label").removeClass("cidsi-checked");
                    });
                }

                return new Element("li").adopt( new Element("label", {
                    title: el.text,
                    text: el.text
                }).addClass(chb.getProperty("checked")?"cidsi-checked":"").grab(chb, "top") );
                
            }.bind(this));

            this.alias = new Element("ul", {
                "class": "cidsi",
                styles: $merge(input.getStyles("width", "height", "float", "margin", "padding"), {
                    "overflow": "auto",
                    "list-style": "none"
                })
            }).adopt(aliasOptions);

            if(this.options.replaceOriginal)
            {
                this.alias.set("id", input.id).replaces(input);
            }
            else
            {
                this.alias.set("id", input.id+"_cidsi").inject(input, "after");

                input.addEvent("change", function(){
                    this.getElements("option").each(function(el){
                        aliasOptions[el.index].getElement("input").checked = el.selected;
                    })
                })

                input.setStyles({
                    position: "absolute",
                    left: -99999,
                    opacity: 0.001
                }).set("tabindex", -1);
            }

            // fix ugly ie behaviour with checkboxes and change event
            // read http://www.quirksmode.org/dom/events/change.html
            if(Browser.Engine.trident){
                this.alias.getElements("label, input").addEvent("click", function(){this.blur()});
            }
        }
    },

    toElement: function(){
        return this.alias;
    }
});



        window.addEvent("domready", (function($){

                new CheckedListBox($("mselect"));
                new CheckedListBox($("mselectReplaceMe"), {replaceOriginal: true} )

            }).pass(document.id) );

<h2>The form</h2>
        <form id="myForm" action="#" method="post">
            <fieldset>
                <legend>
                    Please check it, don't select it.
                </legend>
                <p>
                    <select multiple="multiple" name="myMutlipleSelect[]" size="5" id="mselect">
                        <option value="o1">Option 1</option>
                        <option value="o2">Option 2</option>
                        <option value="o3">Option 3 is very long and will span mutliple lines if width for the select was set with css</option>
                        <option value="o4">Option 4</option>
                        <option value="o5">Option 5</option>
                        <option value="o6">Option 6</option>
                        <option value="o7">Option 7</option>
                        <option value="o8">Option 8</option>
                        <option value="o9">Option 9</option>
                        <option value="o10">Option 10</option>
                        <option value="o11">Option 11</option>
                        <option value="o12">Option 12</option>
                    </select>
                </p>
                <p>
                    <select multiple="multiple" name="myMutlipleSelectReplaced[]" size="5" id="mselectReplaceMe">
                        <option value="o1">Option 1</option>
                        <option value="o2">Option 2</option>
                        <option value="o3">Option 3 is very long and will span mutliple lines if width for the select was set with css</option>
                        <option value="o4">Option 4</option>
                        <option value="o5">Option 5</option>
                        <option value="o6">Option 6</option>
                        <option value="o7">Option 7</option>
                        <option value="o8">Option 8</option>
                        <option value="o9">Option 9</option>
                        <option value="o10">Option 10</option>
                        <option value="o11">Option 11</option>
                        <option value="o12">Option 12</option>
                    </select>
                </p>
                <p>
                    <input type="submit" />
                </p>
            </fieldset>

        </form>

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
                margin: 0;
                padding: 0;
                font: 12px Arial;
            }

            body{
                font-size: 100.01%;
            }

            form{
                margin: 20px;
            }

            fieldset{
                padding: 20px;
                margin: 10px;
            }

            p{
                margin-bottom: 1.5em;
            }

            select{
                height: 185px;
            }

            #mselect{
                width: 150px;
            }

            .cidsi{
                border: 1px solid #ccc;
            }

            .cidsi li label:hover, .cidsi label.cidsi-checked{
                background-color: #EFFF79;
            }

            .cidsi li label{
                cursor: pointer;
                border-bottom: 1px dotted #ccc;
                text-indent: -35px;
                display: block;
                padding: 10px 10px 10px 35px;
            }

            .cidsi li label input{
                vertical-align: top;
                margin:0 10px;
            }

            * html .checklist label { height: 1%; }