Ruben Ruben - 1 month ago 7
CSS Question

Twitter bootstrap select readonly still able to change options

I have a bootstrap select with

readonly="true"
but I can still change the selected option.

I need the
disabled="true"
behavior, but when I use this the select is not submitted.

I need a combination of the 2, the selected option can not be changed but the select has to be submitted.

I could use hidden fields, but I was hoping for an easier solution.

Answer

Another possibility could be to use a select replacement with dropdowns there it should be possible to disable the dropdown but still submitting the value of the hidden select element. But then you could also use hidden fields...

Or you really add a hidden field with the selected value in case the select element is disabled.

<input type="hidden" name="whatever">
<select name="whatever">

If the hidden field has the same name as the select, the selected value of the select should overwrite the submitted value of the hidden field (e.g. when the select field is dynamically enabled with js). And if the select is disabled the value of the hidden field is sent. Not sure about the order of what is submitted first.

$(document).ready(function(){$('select option:not(:selected)').attr('disabled',true);});

this solution should also work (at least with js enabled). It disable every not selected option. And therefore the selected option is submitted and it couldn't be changed.

There is a similar and already answered question html-form-readonly-select-tag-input

Comments