All jQuery UI widgets in disabled state

by bizamajig

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<!-- Specifically using 1.9.0 so the fix for #6059 isn't present. -->
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<p>The following is a complete list of jQuery widgets in their disabled state.</p>

<button id="button">Button</button>
<div class="space"></div>
<div id="accordion">
    <h3>One</h3>
    <div>jfdioasjfisdoaj fisadjfpoiasjd ifojds aiofjdasoif jasdofj diaop</div>
    <h3>Two</h3>
    <div>fjdasoifjdsaoipfj adsiofjdosapifj iosdaj fipoadsjfiosadjifods ajfopjds</div>
</div>
<div class="space"></div>
<input id="datepicker" type="text" />
<div class="space"></div>
<div id="datepicker2"></div>
<div class="space"></div>
<div id="dialog"></div>
<div class="space"></div>
<ul id="menu">
    <li><a>One</a></li>
    <li>
        <a>Two</a>
        <ul>
            <li><a>Two.1</a></li>
            <li><a>Two.2</a></li>
        </ul>
    </li>
</ul>
<div class="space"></div>
<div id="progressbar"></div>
<div class="space"></div>

<p>Not Disabled:</p>
<div id="slider"></div>

<p>Disabled:</p>
<div id="slider-disabled"></div>


<div class="space"></div>
<input id="spinner" type="text" />
<div class="space"></div>
<div id="tabs">
    <ul>
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
    </ul>
    <div id="one">One</div>
    <div id="two">Two</div>
</div>
<div class="space"></div>
<button id="showDialog">Show Dialog</button>

CSS

body { padding: 20px; }
p { line-height: 1.5; margin-bottom: 20px; }
.space { clear: both; margin: 50px; }

/* IE8 opacity madness, see #6059 & #6727 */

/* Original idea. Unfortunately this might have adverse effects on the speced filter property and filter: inherit doesn't always work (see below). */
/*.ui-state-disabled * { filter: inherit; } */

/* Trying to apply the hack to IE7 & IE8 only doesn't work.  The \9 hack doesn't work on filter...? */
/*
.ui-state-disabled * { filter: inherit\9 !important; color: red\9 !important; }
*/

/* The filter: inherit approach.  This works for the slider and the button but not the icons in the calendar.  Apparently filter: inherit doesn't work for non-immediate children...? */
/*
.ui-state-disabled .ui-icon,
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit;
}
*/

/* This is the only thing I can get to work.  *sigh* */
.ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); } /* This is already in 1.9.1 */

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit; /* New fix for #6727 */
}

JavaScript

$('#button').button({
    icons: {
        primary: 'ui-icon-gear'            
    },
    disabled: true            
});
$('#accordion').accordion({ disabled: true });
$('#datepicker').datepicker({ disabled: true });
$('#datepicker2').datepicker({ disabled: true });
$('#dialog').dialog({ disabled: true, autoOpen: false, modal: true });
$('#menu').menu({ disabled: true });
$('#progressbar').progressbar({ disabled: true, value: 37 });
$('#slider, #slider-disabled').slider({
    range: true,
    min: 1,
    max: 20,
    values: [5, 15]        
});

$('#slider-disabled').slider('disable');
$('#spinner').spinner({ disabled: true });
$('#tabs').tabs({ disabled: true });
$('#showDialog').on('click', function() {
    $('#dialog').dialog('open');
});