Restrict selection of SELECT option without disabling the field

Question

I have a multiple selection SELECT field which I don't want the end user to be able to change the value of.

For UI reasons, I would like to be able to do this without using the disabled="true" attribute. I've tried using onmousedown, onfocus, onclick and setting each to blur or return false but with no success.

Can this be done or am I trying to do the impossible?

Answer 1

I know you mentioned that you don't want to, but I actually think that using the disabled attribute is a better solution:

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

If necessary, you can always give the select a class and style it with CSS. This solution will work in all browsers regardless of scripting capabilities.

Answer 2

Could you do it with an onchange event?

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

Answer 3

Your best bet would be to swap out the options within the select box. If you only have one answer in that box, it doesn't matter if it is clickable.

I would, however, try to find another way of doing this as it seems like it would cause frustration for a user. Imagine this user scenario:

1. "Look, a select box of options."
2. click
3. "Hrm, why didn't that work?"
4. click
5. click!
6. "This stupid thing is broken, I'm never coming back here."

If you swap out the select for HTML text, it accomplishes the same goal. This is a fairly simple task for most of the major Javascript frameworks.

Answer 4

@Jack & @17 of 26, good point but the end user will be expecting the select box to be disabled so that confusion shouldn't be an issue.

I should have been clearer about why I couldn't just disable the control.

The application that will be using this will need to disable the selection of the options and there is a requirement that the "locked" control still maintain the look and feel of normal form controls.

Answer 5

Try this trigger.

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

Answer 6

There is a recent new addition to CSS3 that is 95% compatible with all current browsers except Opera Mini, called pointer-events. Put simply, you can "disable" the default action on a SELECT or any other element, and still be able to perform specific events on it...

You can view Chris Coyier's article on them at enter link description here.

Is this closer to what you're looking for... Sorry that I couldn't provide any of my own coding examples...