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>