How to make dropdown list unselectable?

Question

How can I make the <h:selectOneMenu> dropdown list unselectable?

It is not like using disabled. I just want to make the dropdown list options unselectable and to appear with a different (inactive) style class.

How can I achieve this? By a JSF component attribute or CSS or JavaScript?

What do you mean with "unchangeable/unselectable"? That nothing happens when clicking on it (no drop down) or that selecting a value doesn't let it show up, or that it has no effect when submitting? — Zeemee, Apr 30 '12 at 05:28
@Mulmoth "unchangeable/unselectable" mean that nothing happens when clicking on it (no drop down). — AKZap, Apr 30 '12 at 05:37

score 15 · Accepted Answer · edited Oct 24 '15 at 11:39

15

<asp:DropDownList ID="ddlName" runat="server" style="pointer-events: none; cursor: default;">
</asp:DropDownList>

Add style attribute to DropDownList as style="pointer-events: none; cursor: default;". This will work succesfully, I have tried this.

edited Oct 24 '15 at 11:39

Jeroen

60,696
40
206
339

answered Apr 30 '13 at 05:18

SanamShaikh

1,699
3
13
22

2

with jQuery: $('#DropdownID').css({"pointer-events": "none", "cursor": "default"}); – Hugo Jul 28 '13 at 10:30

score 3 · Answer 2 · answered Apr 30 '12 at 05:46

If I understand you correctly, all you need to do is use the disabled attribute.

So, if you have a select tag like this:

<select>
  <option>Value</option>
  <option>Value</option>
  <option>Value</option>
</select>

Simply change it to this:

<select disabled>
  <option>Value</option>
  <option>Value</option>
  <option>Value</option>
</select>

Some doctypes require all attributes to have values, in order to be valid. In that case, you can just use disabled="true" instead.

If the doctype requires a value, shouldn't it be `disabled="disabled"` instead? — gen_Eric, Apr 30 '12 at 18:10

score 1 · Answer 3 · edited May 23 '17 at 10:30

According to this answer, some browsers allow to change the style of disabled components (non-IE), some not (IE). However, the answer is 3 years old - a long time for browsers. So you could try a solution like:

<h:selectOneMenu disabled="true" style="..." ...>

... and check the result with different browsers.

Or alternatively use the readonly attribute:

<h:selectOneMenu readonly="true" style="..." ...>

How to make dropdown list unselectable?

3 Answers3