Disabling Controls in Bootstrap

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?

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/

try

$('#xxx').attr('disabled', true);

Try

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

Remember for jQuery 1.6+ you should use the .prop() function.

$("input").prop('disabled', true);

$("input").prop('disabled', false);

also you can use "readonly"

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

<select id="message_tag">
<optgroup>
<option>
....
....
</option>
</optgroup>

here i just removed bootstrap css for only "select" element. using following css code.

#message_tag_chzn{
display: none;
}

 #message_tag{
  display: inline !important;
}