220

I have a select form field that I want to mark as "readonly", as in the user cannot modify the value, but the value is still submitted with the form. Using the disabled attribute prevents the user from changing the value, but does not submit the value with the form.

The readonly attribute is only available for input and textarea fields, but that's basically what I want. Is there any way to get that working?

Two possibilities I'm considering include:

  • Instead of disabling the select, disable all of the options and use CSS to gray out the select so it looks like its disabled.
  • Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form.
2
  • 2
    sorry for joining late, however solutions provided by @trafalmadorian workest the best. It disables all the inputs that are not selected. It would also work if it select has multiple options enabled. $('#toSelect')find(':not(:selected)').prop('disabled',true); Mar 2, 2014 at 22:30
  • Alternatively, you could leave the control as disabled on the UI but retrieve the value in the action method: public ActionResult InsertRecord(MyType model) { if (model.MyProperty == null) { model.MyProperty = Request["MyProperty"]; } }
    – beastieboy
    Nov 24, 2014 at 14:02

15 Answers 15

247

Disable the fields and then enable them before the form is submitted:

jQuery code:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});
7
  • 3
    This is the one I settled on, mainly because it's the least obtrusive.
    – Jonathan
    Jan 16, 2013 at 6:02
  • 3
    jQuery docs recommend using .prop and .removeProp for 'checked', 'selected' and 'disabled' instead of .attr and .removeAttr see http://api.jquery.com/prop/ Nov 15, 2013 at 23:24
  • 2
    Relevant bit of @JimBergman's comment - "Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value." - from api.jquery.com/prop May 20, 2014 at 21:39
  • 1
    Thanks @JoshuaDance. I've updated the answer to use prop() instead of removeAttr(). The docs say to use prop() for native properties instead of removeProp() as removeProp() will completely remove the property.
    – Tres
    Sep 8, 2015 at 0:45
  • 3
    I like this solution, but just be aware that if the user then uses the browser's back button to get back to the form, the controls will no longer be disabled. Oct 22, 2016 at 8:39
137
<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

Where select_name is the name that you would normally give the <select>.

Another option.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

Now with this one, I have noticed that depending on what webserver you are using, you may have to put the hidden input either before, or after the <select>.

If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.

9
  • 4
    How would this be dependant on the web server? Isn't it the client that renders the page with the select field, and thus in case of conflict like that it would be the client that decides whether to send the value to the server or not? Jul 22, 2011 at 15:38
  • 9
    It depends on how the server handles multiple inputs with the same name. Jul 22, 2011 at 16:04
  • 1
    You'd better not rely on a specific server type, so I think the first approach is cleaner and less error-prone..
    – Luke
    Dec 14, 2012 at 12:49
  • 8
    @Jordan: Browsers do not send disabled fields values to the server, which is why they are empty when you try to handle them server-side. If you have a hidden field with the desired value, and the visible field(s) are disabled, only the hidden field will be sent to the server. Ergo, the hidden field should only be created (via JS or server-side code) when the visible fields are disabled and there is no priority issue. Oct 9, 2015 at 1:33
  • 2
    This is only option if you need a form that works without javascript.
    – Andrew
    Aug 23, 2017 at 15:44
13

I`ve been looking for a solution for this, and since i didnt find a solution in this thread i did my own.

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

Simple, you just blur the field when you focus on it, something like disabling it, but you actually send its data.

4
  • Wow Great and easy solution. Thanks.. +1 from me :) Feb 24, 2013 at 17:27
  • I like this a lot.. depending on interactions in my form, elements become enabled/disabled back-n-forth... how to I re-enable a 'blurred' field in this scenario?
    – bkwdesign
    Nov 11, 2013 at 20:06
  • From googling, looks like $('#selectbox').off('focus'); would do the trick of re-enabling
    – bkwdesign
    Nov 11, 2013 at 20:14
  • 2
    works for text boxes, doesnt work for select boxes, plus super easy to get around by clicking and holding down button
    – Andrew
    Aug 23, 2017 at 16:00
11

I faced a slightly different scenario, in which I only wanted to not allow the user to change the selected value based on an earlier selectbox. What I ended up doing was just disabling all the other non-selected options in the selectbox using

$('#toSelect').find(':not(:selected)').prop('disabled',true);
1
  • Thanks, I found yours the most logically simplest. However attr should changed with prop, would look something like $('#toSelect')find(':not(:selected)').prop('disabled',true); Mar 2, 2014 at 22:28
10

it dows not work with the :input selector for select fields, use this:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });
8

Same solution suggested by Tres without using jQuery

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

This might help someone understand more, but obviously is less flexible than the jQuery one.

1
  • 1
    But, it's not nice for multiple selectors. May be we can use getElementsByTagName('select')?
    – Lucky
    Aug 25, 2016 at 9:25
8

The easiest way i found was to create a tiny javascript function tied to your form :

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

and you call it in your form here :

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

Or you can call it in the function you use to check your form :)

1
  • A very simple and a great tip! worked like a charm. Thank you.
    – itsraghz
    Aug 18, 2022 at 3:06
5

I use next code for disable options in selections

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});
4

Just add a line before submit.

$("#XYZ").removeAttr("disabled");

2

Or use some JavaScript to change the name of the select and set it to disabled. This way the select is still submitted, but using a name you aren't checking.

2

I whipped up a quick (Jquery only) plugin, that saves the value in a data field while an input is disabled. This just means as long as the field is being disabled programmaticly through jquery using .prop() or .attr()... then accessing the value by .val(), .serialize() or .serializeArra() will always return the value even if disabled :)

Shameless plug: https://github.com/Jezternz/jq-disabled-inputs

2

Based on the solution of the Jordan, I created a function that automatically creates a hidden input with the same name and same value of the select you want to become invalid. The first parameter can be an id or a jquery element; the second is a Boolean optional parameter where "true" disables and "false" enables the input. If omitted, the second parameter switches the select between "enabled" and "disabled".

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");
1
  • the 'obj' parameter must be a jquery object
    – Doglas
    Feb 24, 2015 at 16:23
1

I found a workable solution: remove all the elements except the selected one. You can then change the style to something that looks disabled as well. Using jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});
0
<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}
-9

Another option is to use the readonly attribute.

<select readonly="readonly">
    ....
</select>

With readonly the value is still submitted, the input field is grayed out and the user cannot edit it.

Edit:

Quoted from http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:

  • Read-only elements receive focus but cannot be modified by the user.
  • Read-only elements are included in tabbing navigation.
  • Read-only elements may be successful.

When it says the element may be succesful, it means it may be submitted, as stated here: http://www.w3.org/TR/html401/interact/forms.html#successful-controls

2
  • 6
    The control is NOT grayed out and the user CAN edit it. You failed to read the whole section and I quote: "The following elements support the readonly attribute: INPUT and TEXTAREA." Mar 26, 2010 at 22:54
  • 3
    I know that this is an old answer, but this actually works. I don't know the reason of many downvotes.
    – Ze Luis
    Feb 12, 2015 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.