24

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.

Ruben
  • 8,956
  • 14
  • 63
  • 102
  • I don't believe that any select replacement plugin will have this behaviour, as the standard `select` element does not support it. If you need it, you will most likely either need to code it yourself, or as you say, disable the element and use a hidden input. – Rory McCrossan Sep 29 '15 at 14:40

5 Answers5

13

I've run into a similar issue and what i do is when the form onsubmit event is fired remove the disabled attributes as the browser will not post disabled attributes back to the server.

$('form').submit(function () { $('[disabled]').removeAttr('disabled'); })

As you mentioned the only other option i have found is to find the values to hidden inputs.

Sean Wessell
  • 3,490
  • 1
  • 12
  • 20
8

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

Community
  • 1
  • 1
BHoft
  • 1,663
  • 11
  • 18
  • thanks I used you last solution: $('select[readonly] option:not(:selected)').attr('disabled', true); – Ruben Sep 30 '15 at 07:50
  • can you also hightlight your link to the other post, the answers are more complete than mine, maybe mine is a duplicate? – Ruben Sep 30 '15 at 07:56
3

At pageload add disabled to readonly

$('[readonly]').prop( "disabled", true );

Before Submit remove disabled

$('[readonly]').prop( "disabled", false );

Note from Jquery doc:

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

Yush0
  • 1,547
  • 18
  • 22
1

I better solution is not use disabled. Use jquery to anulate action to open select with

$('select[readonly]').on("focus", function(e){ e.preventDefault(); });

Carlos Ricardo Schmitz
  • 447
  • 5
  • 4
  • Your solution doesn't work. I solved the problem using a CSS style hack: select[readonly] { pointer-events: none; } – vdem Apr 17 '23 at 14:53
1

This is my solution, as for me the easiest solution possible:

select[readonly] {
    pointer-events: none;
}
vdem
  • 82
  • 4