You would expect that being able to disable an option in a <select> element (read: dropdown box) would be a fairly important feature for a browser vendor to implement. From a Human Computer Interaction (HCI) standpoint, it is vital – as it lets the users know the option is exists, however under the current circumstances it is temporarily unavailable.
According to the W3C specifications for HTML4, there is an attribute available for both the <select> and <option> elements, which has the desired effect. The attribute in question is disabled (scroll down a little bit to see the option attributes).
According to the above specifications, you should expect that if you apply the disabled attribute to either a <select> or an <option> element, that it would become unavailable. If applied to the <select> element, the entire dropdown list will be greyed out and not selectable. If only applied to the <option> elements, the dropdown may be selected, however the options which are disabled will be greyed out, not selectable and focus will slide over them should you navigate through the options with the keyboard. The guidelines are very clear what is to be expected by this attribute.
Following is a small code snippet of how it should be implemented:
<form action="form.asp" method="post"><select id="dropdown" name="dropdown"><option value="cat">Cat</option><option value="snake" disabled="disabled">Snake</option><option value="spider" disabled="disabled">Spider</option><option value="dog">Dog</option></select><input type="submit" value="submit /></form>
You can use two variations on the syntax for the disabled attribute, depending on the version of HTML you are targeting:
- HTML4: <option value=”spider” disabled>Spider</option>
- XHTML: <option value=”spider” disabled=”disabled”>Spider</option>
The rendering of the above code snippet and the disabled select should be comparable to the below screenshots:
 |
 |
This is where everything starts to slowly fall apart. The major browsers that are in use today are IE6, IE5.5, Mozilla/Firefox, Opera, Safari, OmniWeb. Of those, IE6 is without question the most used browser around the world. This strikes a problem for web developers, as its support for the new web development techniques (read: CSS1, CSS2 and soon CSS3) are either not present at all or worst yet, present but implemented incorrectly.
It never ceases to amaze me how a browser like IE6, managed to not implement something as trivial as an attribute like disabled. The IE team managed to implement it against the <select> element, but some how overlooked the <option> element. They implement the readonly attribute against the appropriate elements – yet some how the disabled attribute managed to be overlooked when they implemented it. More surprising is that, since the HTML4.01 specification came out in late 1999, IE has been updated and upgraded for various things literally hundreds of times. Why hasn’t this made it into an update? You’d begin to think that Microsoft aren’t aware of it, however the thought of that just seems too far fetched.
Disgraceful.
It would be nice if we could use some low-level drawing stuff to display things, kinda like how you can fallback to GDI+ in Windows Forms, but in plain HTML/CSS.
As an asside, perhaps you could use a Javascript workaround, make the option grey and when its selected (I’m sure theres a Javascript event for this) cancel the selection if they select a disabled option.
I’ve already started writing some JavaScript to do just that Paul. The one thing that is going to be a tad difficult, is making it ‘look’ right. Though if it gives the user some feedback (even if it isn’t perfect), is going to be better than no feedback at all.
This is godd incase of providing the editabkle option also to come along with disabled not for selection.
alas, it is not to be. thanks for posting anyway — i was about to spend all night working on this.
this doesn’t work in IE
Agree with vaio,dosen’t work in IE(not a cross browser solution)
No shit “this doesn’t work in IE”!…
Read the freaking article…
vaio/Mayukh,
It isn’t meant to work at all, that was the point of the post. What it was meant to do, was inform web developers that if they try and use the
disabledattribute against anoptionelement – that it won’t work correctly in IE.If you’re looking for a possible solution, try the URL linked in the top right corner of this post.
Al.
Hi,
I tried this thig but on my html page,disabled is not working.I copied the full code and paste it on a new page but still did not work.
Please help me.
Sometimes I wonder about peoples reading abilities.
Anyway I believe that this may be fixed in IE7, basically the bug in IE is due to the lazy way that the developers made the select element – it just calls the standard windows drop down box with out any consideration for the web.
I don’t think there’s much to wonder. People are morons.
I just verified that this is NOT fixed in IE7 beta 2.
Microsoft wants you to use .NET controls.
I doubt they bother to fix anything that doesn;t make them money.
Charles I would igree! The IE7 beta2 doest the same thing as all IE’s.. So I think we will just have to use JS workaround to do this with no problems! Or even more simple solution – use Mozilla Firefox :) It shure does work there!
Just testing Opera on Linux. Both 9 and 9.02 versions seem to refuese to display the option if it is disabled. Has anyone seen this on any other platform (Windows/Mac?)
it also seems that disabling option values is not functional with Safari 2.0 also! i’m shocked! safari??!! apple??!!
hi again. just incase anyone views this page who were in the same position as me a few days ago, learning that only FIREFOX will allow for select menu values to be disabled (therefore not cross-platform), there is a very good Javascript workaround at the following address that actually solves this issue:
http://www.thescripts.com/forum/thread588260.html
it’s not exactly like disabling a select menu option, but it does the same thing. this javascript will actually remove the value from a pulldown menu (the ultimate disablement) but it will also replace it depending on user selections within the form.
good luck!
Excellent article…thanks for sharing the knowledge and saving others the pain of trying to do something which is not possible… :)
Hi every one!!
Thanks for all your postings. Indeed it’s a shame we all depend some how on the Microsofts bastards. How they came along with all that load of shit and anyone saw that coming? That I will never now.
The javascript solution works great although!
Hi, another thing. I found a simplest solution. It’s not great, but is not dependent on javascript and works on every browser.
You can make items you want disabled optgroups, and they won’t be selectables in IE, and if you applies disabled to it won’t be selectable in firefox either. I haven’t tryed that in any other browser. Let me know if you do.
The only matter is that in IE it will be italics even with some css on it. In firefox it can be what ever you want, but that’s not a news.
The code would be like this:
Some selectable option
Another selectable option
Let me know!!!
@Joe:
The only problem with using is that any options in a second ‘optgroup’ will not invoke an ‘onchange’ event if the user is navigating using the keyboard (or mousewheel) to select their option.
For example, if you have:
first
second
third
fourth
…if you focus on the select box, then use the down arrow on your keyboard to scroll through the options (this is with the select box collapsed, mind you), the onchange will only fire with options ‘first’ and ‘second’. This is a bug with IE.
This can present problems for those users who use the keyboard to navigate their forms.
Any advice/workarounds for this would be appreciated, btw…
Sorry, didn’t have the code commented out appropriately:
@Joe:
The only problem with using is that any options in a second ‘optgroup’ will not invoke an ‘onchange’ event if the user is navigating using the keyboard (or mousewheel) to select their option.
For example, if you have:
!form!
!select id=dropdown onchange=javascript:alert(“hello”)!
!optgroup label=optgroup1!
!option value=first!first!/option!
!option value=second!second!/option!
!/optgroup!
!optgroup label=optgroup2!
!option value=thir!>third!/option!
!option value=fourth!fourth!/option!
!/optgroup!
!/select!
!/form!
…if you focus on the select box, then use the down arrow on your keyboard to scroll through the options (this is with the select box collapsed, mind you), the onchange will only fire with options ‘first’ and ‘second’. This is a bug with IE.
This can present problems for those users who use the keyboard to navigate their forms.
Any advice/workarounds for this would be appreciated, btw…
Thanks, that was useful. I also need to know how to put a label to the select box, like the gmail’s list for actions on selected mails.
Yes, it also doesn’t work in Safari 2.0.4 (the version in Tiger 10.4.10). It works on the current WebKit (and that means it works on Safari 3.
Unbelievable!
Thank you Joe, very much! Your idea with optiongroup was very useful!
I can’t believe MS still didn’t fix this in IE7. I finished my application, then decided to test it in IE and it completely broke. I had to redesign the whole update method to get around this.
The work around I came up with is to dynamically regenerate the entire select, omitting the options I would have disabled.
Well, IE8 finally fixed it .. too bad we can’t rely on users using IE8 yet.
IE7/8 also kills JavaScript ‘prompt’ … not that it is related to this discussion, just that I discovered both annoyances while working on the same project.
i think i tried it and worked on IE6 but one has to do for example id.disabled=true; and it works. please correct me if i am wrong.
If using javascript isn’t an issue, a simple solution is to encase the input(s) in a div and set the initial input display to ‘none’. For the container div, have the background set to a greyed-out image of the input to create the illusion of a disabled input. Then when the form element needs to be enabled you can use javascript to set the display to block and container div background to none. Granted this may not end up looking exactly the same across all browsers, but for me it was close enough to get the job done.
I can up with a way to do with with javascript, and more specifically jquery, which turns the options into an empty optgroup element. Works well in all browsers, can’t be styled in ie6 but works and the optgroup jumps to the bottom of the list in opera 9.
http://harrybailey.com/2008/11/disabling-select-options-in-internet-explorer/