IE8 bug when multiple select list box is disabled

The following applies to Internet Explorer 8 only.

This example shows that when you disable a multiple select element (aka list box) that has selected options, the style of the entire select box and options changes such that you can't tell which items are selected. This is in contrast to all other browsers, which still identify the selected items (via background color, etc.).


<html> 
<head>
<title>IE8 Disabled Multiple Select Bug</title> 
</head> 
<body> 
<form action="#" method="get"> 
<select size="10" name="lstBox" multiple="multiple" disabled="disabled" 
id="lstBox"> 
<option selected="selected" value="S1">Selected</option> 
<option value="NS1">Not selected</option> 
<option selected="selected" value="S2">Selected</option> 
<option value="NS2">Not selected</option> 
<option selected="selected" value="S3">Selected</option> 
<option selected="selected" value="S4">Selected</option> 
</select> 
<br> 
<input name="optEnabled" checked="checked" type="radio" 
    value="disabled" 
    onclick="document.getElementById('lstBox').disabled=true;"
    > Disabled
<br> 
<input name="optEnabled" type="radio" value="enabled" 
    onclick="document.getElementById('lstBox').disabled=false;"
    > Enabled
</form> 
</body> 
</html>

Does anyone know of a work around for this?

One solution I've found requires JavaScript that walks through the selectelement.options array and sets the backgroundColor on each element in the array that has selected == true. But this seems messy to me, and requires also removing the style when the select element becomes enabled again.

Note: The readonly attribute doesn't apply to select elements (not sure why... seems like a big oversight to me). So setting that instead of disabled is not an option.

IE8 bug when multiple select list box is disabled

Fotiman

alt131

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week