Read only (not disabled)

Question

I am looking to make a dropdown menu chosen , and I need to do this dynamically using the jQuery selector. If I disabled it using:

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

the value is not POSTED, but I need it.

I tried

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

but it does not work.

I am using Chosen v1.4.2 and jQuery v2.1.4 .

Help rate! Thanks.

Answer 1

try the following: -

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

Demo

Answer 2

There are several options you could make.

• Disable the dropdown menu and save the value in a hidden field and send it to POST.

• Disable all other selections, so only one selected is enabled.

   $('#dropdownDepartment option:not(:selected)').attr('disabled', true); 

• Turn off the drop-down menu and before you make a message, turn it on
• If you want to disable it, translate it into a read-only text box.

Answer 3

I have a workaround. Therefore, I hope that this will help someone in the future (I think you have already made this decision).

First, type the selected value of the selected selection parameter into hidden input, as shown below. For the value of $_POST get the value from this hidden input $_POST['myselect'] :

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

Then disable the selected selection. But it's safe to set the hidden input value to the current one before disabling it:

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

NB If you do not want to disable it, you simply do not need to update the value of the hidden input in the change event of the selected selection.

A working demo can be found by clicking here.

Answer 4

I can be late for the party, but I ran into the same problem as the OP. The workaround I found to return the values, even if they are disabled, is to re-enable them when submitting the form.

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

Note the [space] [star] after TheList to recursively re-enable each child in the list.

Answer 5

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