Disable a drop down and still submit a value?

Question

I have a drop down box that I would like to lock after an item has been selected. Unfortunately using 'disable' stops the field from being submitted at all when the form is submitted. Is there a way around this?

Answer 1

You can re-enable the dropdown list right before the form is submitted:

$("form").submit(function() {
    $("#yourDropdown").prop("disabled", false);
});

Answer 2

Take a hidden field:

<input id="hiddenSelect" type="hidden" name="same_as_select_box">

Then in select change event set the value to that hidden field like following:

$('select').change(function() {
  $('#hiddenSelect').val(this).val();
  $(this).prop('disabled', true);
});

Now you can submit the form with your select value, without further enabling it at submit.