Twitter Bootstrap Question posted in

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.

Tags:

5

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

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

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

    Login or Signup to reply.
  5. 0

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

    select[readonly] {
    pointer-events: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search