Comments on: Disable Option’s In A Select (Dropdown) Element

By: Harry Bailey

Harry Bailey — Tue, 15 Sep 2009 07:50:20 +0000

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/

By: Kevin

Kevin — Tue, 04 Aug 2009 19:34:43 +0000

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.

By: deepak

deepak — Wed, 28 Jan 2009 23:34:29 +0000

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.

By: Sean

Sean — Wed, 22 Oct 2008 18:34:18 +0000

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.

By: PENIX

PENIX — Sat, 01 Dec 2007 00:07:29 +0000

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.

By: Sanjok

Sanjok — Wed, 10 Oct 2007 08:44:15 +0000

Thank you Joe, very much! Your idea with optiongroup was very useful!

By: Miguel Arroz

Miguel Arroz — Fri, 24 Aug 2007 16:30:18 +0000

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!

By: Sharath

Sharath — Tue, 31 Jul 2007 18:20:22 +0000

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.

By: Halibut

Halibut — Tue, 24 Jul 2007 19:19:18 +0000

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…

By: Halibut

Halibut — Tue, 24 Jul 2007 19:16:33 +0000

@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

This can present problems for those users who use the keyboard to navigate their forms.

Any advice/workarounds for this would be appreciated, btw…