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.

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.

• javascript
• jquery
• jquery-chosen

• you mean disable it? I meant you do not want user to click it? – Guruprasad J Rao Commented Jun 3, 2015 at 12:50
• if you want to disable you can try this:- jsfiddle.net/ymou0ffx/1 – Umesh Sehta Commented Jun 3, 2015 at 12:52
• 4 I don't want to disable it. I want to make it read only. – Robin Commented 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 Commented Aug 25, 2016 at 9:14

8 Answers 8

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.

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

try this:-

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

Demo

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.

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.

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});

try this

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

Had this problem recently and this simple trick does the work:

Enclose the select field in a div tag and set it's css to pointer-events: none;.

    <div id="Test_div">
      <select multiple id="Test">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
  </div>

<script>
    // Chosen - Multi Select
    $("#Test").chosen({
     no_results_text: "Oops, nothing found!",
     width: "100%"
     });
    // Set the parent div to pointer-events: none;
    $("#Test_div")..css({'pointer-events': 'none'});
</script>