I am currently using the Jquery-UI auto-plete plugin bobox implementation, but i changed the script so that the input element added by the plugin is disabled (the user cannot write in the input, he can only click the button in order to view the options) like this :

$.widget("uibobox", {

_create: function () {
    var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? $.trim(selected.text()) : "";
    var input = this.input = $("<input>")
                .attr("name", select.attr("name"))
                .attr('disabled', true)
                .insertAfter(select)
                .val(value)
                .autoplete({ .......

Probably because the input is disabled, the bo-box doesn't hide after i lose focus by clicking on empty space, or clicking on another bo box (the input element has the blur event handler, but it doesn't fire).

Is there a way to set a blur event on a input element that is disabled or any way of hiding the bo-box when a user wants to lose focus?

I am currently using the Jquery-UI auto-plete plugin bobox implementation, but i changed the script so that the input element added by the plugin is disabled (the user cannot write in the input, he can only click the button in order to view the options) like this :

$.widget("ui.bobox", {

_create: function () {
    var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? $.trim(selected.text()) : "";
    var input = this.input = $("<input>")
                .attr("name", select.attr("name"))
                .attr('disabled', true)
                .insertAfter(select)
                .val(value)
                .autoplete({ .......

Probably because the input is disabled, the bo-box doesn't hide after i lose focus by clicking on empty space, or clicking on another bo box (the input element has the blur event handler, but it doesn't fire).

Is there a way to set a blur event on a input element that is disabled or any way of hiding the bo-box when a user wants to lose focus?

• javascript
• jquery
• jquery-ui

Share Improve this question Follow asked Nov 24, 2011 at 14:02 AtzoyaAtzoya 1,3871414 silver badges3131 bronze badges 3

• Hi @Atzoya, I've used your approach and it works well in FF, but I added the click event to the input control too so that if the user clicks on the input the drop down appears. Works well in FF but IE9 the drop down jumps out and dissappears again. How did you work this bit out? – Jacques Commented Sep 19, 2012 at 14:57
• I checked it out and the same thing is happening in my application as well. I'm currently quite busy on another project, but as soon as i find some time I will try and find a solution to this issue. When and if i do, i will post it here. – Atzoya Commented Sep 20, 2012 at 14:50
• 1 Hi @Atzoya, I mented out the line that deals with a bug $(this).blur(); and this solved my problem. Well it works in FF, Chrome, Safari and IE 7,8 and 9. Not sure about IE6 though – Jacques Commented Sep 21, 2012 at 7:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I would rethink your strategy a bit. Autoplete is not designed to work on a disabled input. Instead, I would use readonly. Replace:

.attr("disabled", true)

with:

.attr("readonly", true)

You will get the cursor in the input, but your original requirement is met.

Example: http://jsfiddle/S77xa/1/

You need to change:

.attr("disabled", true);

to:

.attr("disabled", "disabled");

Take a look at this fiddle: http://jsfiddle/Lq8tq/1/

I hope this helps!

Try this.

$('boboxname').bobox('disable');

$('boboxname').bobox('enable');