In another dropdown box struggle, I dealt with the problem of disabling options in a SELECT element, dynamically.
Usability is one of the aspects to keep in mind when you create a user interface. The user interface is supposed to stay consistent, so the user won’t get confused. If the user, given a specific state, isn’t supposed to select a specific option, it’s better to gray-out this option (visual feedback) than to let it disappear. E.g. when a user hasn’t done anything yet, undo seems an impossible function. We see this technique applied in many systems, but I hadn’t seen it in drop down lists in browsers. And still a functional spec of a system I was working on required several choice list options to be unavailabe, given some state.
I’ll show an example. Consider a SELECT list of numbers 1..9, and two checkboxes that -when checked- disallow selecting a number which is divisible by two (2) respectively five (5):
Number should not be divisible by 2
Number should not be divisible by 5
Select a number
The HTML DOM model caters for a disabled property of OPTION elements. However, Internet Explorer doesn’t do anything with it (Mozilla does). Like most browser issues, this isn’t a problem a script can’t fix.
To use this fixing script, include it in your HTML page and add to each disablable (is this a word?) Select element:
onfocus="storeCurrentSelection(this);" and onchange="checkSelected(this);"
I won’t go into details in how to implement the business-logic; e.g. how to determine which options should be disabled. Your business logic should set the disabled property of an option element, and call the updateDisableds(selectBoxElement) method.
I’ve still left some bugs; e..g when a selected element becomes disabled, it stays selected. How to deal with this problem is left as an exercise to the reader. Good luck!