Disable select options (including IE6 & IE7)

jQuery functions to disable or hide select options depending on the browser version used.

by Bruno G.

HTML

<select id="foo" multiple="multiple" size="4">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

<button id="dis">disable selected option(s)</button>
<button id="enb">enable all options</button>

JavaScript

if ($.browser.msie && parseFloat($.browser.version) < 8) {
    $.fn.disableOption = function(){
        this.each(function(){
            $(this).wrap('<span />');
        });
        return this;
    };
    $.fn.enableOption = function(){
        this.each(function(){
            $(this).unwrap();
        });
        return this;
    };
} else {
    $.fn.disableOption = function(){
        this.prop('disabled', true);
        return this;
    };
    $.fn.enableOption = function(){
        this.prop('disabled', false);
        return this;
    };
}

$('#dis').click(function(){
    $('select option:selected').disableOption().prop('selected', false);
});
$('#enb').click(function(){
    if ($.browser.msie && parseFloat($.browser.version) < 8) {
        $('select span option').enableOption();
    } else {
        $('select option:disabled').enableOption();
    }
});