[html] 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?

Try

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

try

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

also you can use "readonly"

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

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

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

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

<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;
}