Question

I’m using Bootstrap css and js in my application. Accidentally I clicked on a disabled Dropdown list and found that it’s opening the dropdown. I have made it readonly in the attribute of the select element:

<select id="xxx" name="xxx" class="input-medium" readonly>

I have also tried setting readonly="true", but still the same.

However, textbox control works fine, if you don’t use jQuery.datepicker.

Is there a special way of making a dropdown control readonly when we use bootstrap?

Answer 1

No, Bootstrap does not introduce special considerations for disabling a drop-down.

<select id="xxx" name="xxx" class="input-medium" disabled>

or

<select id="xxx" name="xxx" class="input-medium" disabled="disabled">

will work. I prefer to give attributes values (as in the second form; in XHTML, attributes must have a value), but the HTML spec says:

The presence of a boolean attribute on an element represents the true
value, and the absence of the attribute represents the false value.

(from http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attribute)

The key differences between read-only and disabled:*

The Disabled attribute

• Values for disabled form elements are not passed to the processor
  method. The W3C calls this a successful element.(This works similar
  to form check boxes that are not checked.)
• Some browsers may override
  or provide default styling for disabled form elements. (Gray out or
  emboss text) Internet Explorer 5.5 is particularly nasty about this.
• Disabled form elements do not receive focus.
• Disabled form elements
  are skipped in tabbing navigation.

The Read Only Attribute

• Not all form elements have a readonly attribute. Most notable, the <SELECT>, <OPTION>, and <BUTTON> elements do not have readonly attributes (although thy both have disabled attributes)
• Browsers provide no default overridden visual feedback that the form element is read only
• Form elements with the readonly attribute set will get passed to the form processor.
• Read only form elements can receive the focus
• Read only form elements are included in tabbed navigation.

*-blatant plagiarism from http://kreotekdev.wordpress.com/2007/11/08/disabled-vs-readonly-form-fields/