Chosen: Disabled selectbox's has no effect on Chosen

Created on 25 Jul 2011  ·  28Comments  ·  Source: harvesthq/chosen

Chosen dosent take into account when the selectbox it replaces is disabled.

I am using the prototype version.

All 28 comments

buenas noches como puedo deshabilitar el combo para que solo se muestre la informacion pero no pueda cambiar y cuando quiera modificar la informacion lo active

I am having this problem too. Is there any way to disable the entire Chosen box (not just a few options)? I am using the jquery version.

I vote for that.
Would be nice if the disabled="disabled" could be respected.

+1!

+100 really need that feature.

  1. If original combobox is disabled, then chosen combo should be disabled too.
  2. $('#combo').attr('disabled','disabled'); should make chosen disabled too. Should it call trigger change event as well to apply?

+1

+1

+1000
I need to, please fix it
as soon as posible.
(I am using jQuery version)

Not sure if it is OK to post this, but I know this is something people want. I came up with a short term band-aid fix for the problem. It is for the jquery version. I don't know prototype.

In chosen.jquery.js...
(1) on line 30 should be the function call "this.set_up_html();" Add the line this.disabled = $(elmn).attr('disabled'); BEFORE it.
(2) on line 52, replace
container_div = $("<div />", { id: this.container_id, "class": "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0), style: 'width: ' + this.f_width + 'px;' });
with
if( !this.disabled ) { container_div = $("<div />", { id: this.container_id, "class": "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0), style: 'width: ' + this.f_width + 'px;' }); } else { container_div = $("<div />", { id: this.container_id, "class": "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0), style: 'opacity:0.5;width: ' + this.f_width + 'px;' }); }

As you can see I just modified the opacity. You can do whatever you want to make it greyed out.

(3) on line 142 you will see Chosen.prototype.container_click = function(evt) {
Add AFTER if( !this.disabled ) { and on line 175 BEFORE the }; add a close curly bracket }

dan

bloquea solo el click, si presionas la flechas de desplazamiento abajo, a la izquierda derecha, puedes seleccionar una opcion o hacer busquedas

Yeah, that makes sense. I guess you'd just have to repeat step #3 for those (the arrow key) functions too (they're a little further down the page). I didn't realise you could use the arrow keys.

+1 Could really use this feature right now.

+1

I want to use chosen for a project I'm working on but I can't without this feature.

+1 on that. This feature is really neccessary to be able to claim that chosen is unobtrusive.

In addition to @danielberesh's advice, I surrounded the contents of Chosen.prototype.keyup_checker and Chosen.prototype.keydown_checker with the if (!this.disabled) check as well. That completely disabled the key navigation in the disabled fields for me, which made them behave completely like disabled form fields. Thanks Daniel for pointing me in the right direction on this one.

+100500

I've implemented these suggestions and sent a pull request here:

https://github.com/harvesthq/chosen/pull/248

Support for disabled form fields has been added in f1e1c55. Please update to the latest version.

Chosen will check for disabled status on its initial build. After that, you will need to fire the updated field event to let the plug-in know there was a chage.

jQuery

$("#original_form_field").attr('disabled', true).trigger("liszt:updated");

Prototype

$("original_form_field").disabled = true;
$("original_form_field").fire("liszt:updated");

thank you!

Please also remove 'delete' cross icon on disabled

Thanks for pointing that out, @erundook -- forgot all about removing choices. I tried hiding and showing the delete icon when the field gets disabled / re-enabled, but it didn't really feel right. Instead, I'm now just disabling the click behavior on the icon if the form field is disabled. Pull the latest and give it a shot!

Excelente, muchas gracias

This chosen UI should also be disabled when the readonly attribute is present...

@sheadawson I made a PR about it: https://github.com/harvesthq/chosen/pull/1014

Awesome!!! Very easy to use.

The "readonly" attribute seems to suffer the same problem, as mentioned by sheadawson. I think it would be great if this worked as well.

Hi..
I am using chosen Version 1.4.2

On disabled multiselect listbox (control is disabled onload server side) chosen style has no effect.. All the mentioned code is available in this version as far as I gone through..

Can anyone suggest me a better option to make it work.. asap. please

Thanks
Srijith

Works for me, as well! Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Scalamoosh picture Scalamoosh  ·  8Comments

alexfrancavilla picture alexfrancavilla  ·  9Comments

eduardokranz picture eduardokranz  ·  6Comments

raggzy picture raggzy  ·  5Comments

engintekin picture engintekin  ·  8Comments