I am trying to disable all text boxes on my form. One of these boxes has a typeahead on it. When I do:

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

It is no longer enabled, but the color does not switch like all of the other text boxes do when they bee disabled.

I believe this is due to the twitter typeahead and I am wondering if there is a way around it. Does anyone know how to override the text box background color or remove the typeahead pletely when the text box is disabled?

I have tried .unbind() and .addClass("greyBackground") but neither of these seem to do the trick.

I am trying to disable all text boxes on my form. One of these boxes has a typeahead on it. When I do:

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

It is no longer enabled, but the color does not switch like all of the other text boxes do when they bee disabled.

I believe this is due to the twitter typeahead and I am wondering if there is a way around it. Does anyone know how to override the text box background color or remove the typeahead pletely when the text box is disabled?

I have tried .unbind() and .addClass("greyBackground") but neither of these seem to do the trick.

• javascript
• typeahead
• typeahead.js

Share Improve this question Follow asked Jun 24, 2013 at 21:09 Barry TormeyBarry Tormey 3,14655 gold badges3737 silver badges5656 bronze badges 4

• I see the color changing just fine – Ian Commented Jun 24, 2013 at 21:16
• @Ian what implementation are you using to disable the text box? – Barry Tormey Commented Jun 26, 2013 at 2:34
• Is disabled properly here also (background is changed in a clean "fresh" bootstrap) - maybe $("#textbox").attr( (using quotes) would help? – davidkonrad Commented Jun 27, 2013 at 13:17
• fyi, .attr() is the wrong method when setting properties like disabled. use .prop() for this (but in this case neither do the job) – ThiefMaster Commented Nov 13, 2013 at 13:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13

If you don't care about maintaining the typeahead.js functionality while the textarea is disabled, you can destroy the typeahead like so:

$('#textbox').typeahead('destroy');

This will reset/remove any attributes/styles typeahead.js may have added. If later on you wanted to add back the typeahead.js functionality, you could reinitialize it with:

$('#textbox').typeahead({ /* configs */ });

Also, typeahead.js doesn't support textarea elements out of the box, so unless you're using a forked version, you shouldn't assume typeahead.js will work as expected.

In Bootstrap 2.2.2 there is no .typeahead('destroy') function, so the following does remove all the listeners it was previously bound to and the DOM element it has created.

$('#textbox').off()
        .data('typeahead')
        .$menu
        .off()
        .remove();