11

I'm looking to make a chosen dropdown menu read only, and I need to do this dynamically using a jQuery selector. If I set it to disabled using:

$("#dropdownDepartment").attr("disabled","disabled").trigger('chosen:updated');

the value isn't POSTed but I need it to be.

I have tried

$("#dropdownDepartment").attr('readonly',true).trigger('chosen:updated');

but this doesn't work.

I'm using Chosen v1.4.2 and jQuery v2.1.4.

Help appreciated! Thank you.

4
  • you mean disable it? I meant you do not want user to click it? Jun 3, 2015 at 12:50
  • if you want to disable you can try this:- jsfiddle.net/ymou0ffx/1 Jun 3, 2015 at 12:52
  • 4
    I don't want to disable it. I want to make it read only.
    – Robin
    Jun 3, 2015 at 12:57
  • One more option is to empty all the dropdown fields and fill only the single option you want to show.
    – Lucky
    Aug 25, 2016 at 9:14

7 Answers 7

12

The best solution for me was such an ugly trick $("#dropdownDepartment").prop('disabled',true).trigger('chosen:updated').prop('disabled',false). So chosen is disabled but value from select is POSTed.

1
  • 1
    This should be accepted answer. at-least we don't need to deal with any other hidden input element creation or anything else. Aug 3, 2018 at 5:39
5

There are a few options you could do.

  • Disable the drop down and store the value in a hidden field and send that in a POST.
  • Disable all the other selections so only the one selected is enabled

    $('#dropdownDepartment option:not(:selected)').attr('disabled', true);
    
  • Disable the drop down and before you do a post enable it
  • When you want to disable it turn it into a read only textbox
4

try this:-

var select = $('select');
var oldVal=$('select').val();
select.chosen().on('change',function(e){   
     select.val(oldVal);
   select.trigger("chosen:updated");  
});

Demo

2

I have a workaround at the same. So hope it will help someone in the future (I guess you already did the solution).

First print the selected option value of the chosen select into a hidden input like the following. For $_POST value get the value from this hidden input $_POST['myselect']:

<input type="hidden" name="myselect" value="selected_option_value_goes_here" />

Then disable the chosen select. But it is safe to set the hidden input value to the current one before disable it:

$('input[name=myselect]').val($(".chosen-select").val());   
$('.chosen-select').attr("disabled", true).trigger("chosen:updated");

N.B. If you don't want to disable it then just no need to update the value of the hidden input on change event of the chosen select.

A working demo can be found by clicking here.

2

I may be late to the party, but I came across the same issue as OP. The workaround I have found to post back the values even if they are disabled is to re-enable them when the form is submitted.

$("form").bind("submit", function () {
    $("#TheList *").prop("disabled", false).trigger("chosen:updated");
});

Notice the [space][star] after TheList, it is to recursively re-enable each child in the list.

1

we can achieve the excepted behaviour by removing the pointer event on chosen-container div.

with this even if we dont enable the input its value will be posted with form submit

//to disable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': 'none','opacity':0.5});
//to enable
$('.chosen').parent().find('.chosen-container').css({'pointer-events': '','opacity':1});
0

try this

$("#dropdownDepartment").attr('disabled', 'disabled');
$("#dropdownDepartment").data('chosen').search_field_disabled();
$("#dropdownDepartment").removeAttr('disabled');
$("#dropdownDepartment").trigger('chosen:updated');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.