The problem does not occur in Firefox 3.5.11, and only occurs in 3.6.8 when you specify the SIZE attribute in a SELECT menu with MULTIPLE selectable items. Leave off the SIZE attribute, and the desired greying-out happens just fine, albeit with a 20-item window into your menu items. If that's not acceptable, you can use some JavaScript to convince the menu to grey out and then come back to normal as you disable and enable it. For example, given some HTML that defines some menu items, which should be disabled when a given checkbox is selected:
<input type="checkbox" name="items" onclick="enableDisable(this, formname)" .../> .... <select id="menu" multiple size="4"> .... </select>...here's the JS that can be used:
function enableDisable(input, formName) { if (input.checked) { disable(formName); } else { enable(formName); } } function disable(theForm) { if (theForm.menu != null) { theForm.menu.disabled = true; // address the Firefox problem - grey it out manually: theForm.menu.style.backgroundColor="#DBDBDB"; } } function enable(theForm) { if (document.forms[theForm].menu != null) { document.forms[theForm].menu.disabled = false; // address the Firefox problem - reset to normal color, manually: document.forms[theForm].menu.style.backgroundColor="#FFFFFF"; } }Disclaimer: As is typical with my code snippet posts, I've extracted the relevant statements from my production code, manually editing field names, method names, etc. to protect my client's IP. Since I've not taken the time to confirm the extracted code (I'm lazy, I'm too busy, it's left as a reader exercise, etc.), I can't guarantee that your copy-paste exercise will "just work" - but I do believe I've given you the basic building blocks to make it work for your application.
Another easy solution is to use css attribute selector instead of javascript like this:
ReplyDeleteselect[disabled]
{
color : #BBBBBB;
background-color: #DBDBDB;
}
Greetings from Germany
Nice - thanks Micha!
ReplyDelete