How to make html <select> element look like "disabled", but pass values?

Asked 7/10, 2012 at 14:25 Answered 18/10, 2017 at 14:34

When I'm disabling a

<select name="sel" disabled>
    <option>123</option>
</select>

element, it doesnt pass its variable.

What to do to look it like disabled, but be in "normal" state?

This is because I have a list of "selects", and sometimes some of them have single value, so user should understand that it has only one value without clicking it.

Microphyte answered 7/10, 2012 at 14:25 Comment(5)

Is it not enough that they focus the element, see the single option and then accept that there's only one option? If they can't do anything with the element, just use a regular input with a readonly attribute, or a hidden input. – Luellaluelle 7/10, 2012 at 14:27

If it only has one option, why does it need to be in the form? Also, do note that a not-clueless user will be able to change the select value easily. – Cyanosis 7/10, 2012 at 14:27

@WebnetMobile.com: I'm glad to, but don't know what is it – Microphyte 7/10, 2012 at 14:28

@EL2002, it sounds like you are relying on the form to return specific value you need. Have you thought that the user may send any value in that <select> element? Always check your form. If there is just one possible value, you shouldnt care about it at all: the program would automatically fill it up anyways, because it should not allow any other values being selected! – Hebe 7/10, 2012 at 14:32

There are times when the OP's request is perfectly desirable behaviour. eg. When there are normally many options available, but some combination of other selections on the form allows for only 1 specific selection. Selecting the option and disabling the control would be far superior to other javascript shenanigans. – Ankledeep 1/7, 2015 at 23:10

You can keep it disabled as desired, and then remove the disabled attribute before the form is submitted.

$('#myForm').submit(function() {
    $('select').removeAttr('disabled');
});

Note that if you rely on this method, you'll want to disable it programmatically as well, because if JS is disabled or not supported, you'll be stuck with the disabled select.

$(document).ready(function() {
    $('select').attr('disabled', 'disabled');
});

Surfboarding answered 7/10, 2012 at 14:43 Comment(16)

it seems to be the only solution. – Microphyte 7/10, 2012 at 14:49

@EL2002 If you really aren't happy with the select behavior when it contains only one option, then the only other solution I can imagine would be to use CSS to imitate a disabled look, as Praveen suggested – Surfboarding 7/10, 2012 at 14:55

When you have kept it disabled, users won't be able to submit the data. Is that fine with you? – Cetus 7/10, 2012 at 14:58

It is strictly against HTML standards for a disabled form field to be included upon form submission – Surfboarding 7/10, 2012 at 14:59

@PraveenKumar The code in the submit handler above gets executed before the form is actually submitted. So by the time the form is actually submitted, the select element will no longer have the disabled attribute. Furthermore, you may add "return false;" to the submit handler to prevent actual form submission. – Surfboarding 7/10, 2012 at 15:3

maybe it'll be better to hide "one value selects" with "display:none" and place instead a dummy "one value selects" without names and with disabled attrubute? – Microphyte 7/10, 2012 at 15:18

@EL2002 I don't follow. The solution above should work perfectly well. – Surfboarding 7/10, 2012 at 15:22

@Surfboarding < is there a pure js solution to clear "disabled-s" in inputs without cycle? – Microphyte 7/10, 2012 at 15:26

@EL2002 Though, you may see the select button flash from disabled to enabled real quick as the form is submitted. Setting it to display:none and using a dummy would work too, but if you're going that far you may as well just use a hidden input, as others have suggested – Surfboarding 7/10, 2012 at 15:27

@EL2002 I'm not sure what you mean by "without cycle", but yes, you can use the code above to remove the disabled attribute from any user inputs. Just use the appropriate selector. $('input, select, textarea').removeAttr('disabled'); – Surfboarding 7/10, 2012 at 15:30

@EL2002 document.getElementById('yourselectid').disabled = false; or document.getElementById('yourselectid').removeAttribute('disabled'); – Standpoint 8/10, 2012 at 10:8

Note that this solution has no graceful degradation. If JS is disabled or unsupported, the value won't get posted. Presumably that will break your form. – Standpoint 8/10, 2012 at 10:10

@Surfboarding +1 for progressive enhancement! – Standpoint 8/10, 2012 at 10:39

@flem 1. I mean, enable many inputs with one shot of code =) 2. And yes, with not enabled js it become null, thats why I thought to achieve it with dummies as described in my "22 hours ago" comment. – Microphyte 8/10, 2012 at 13:26

This isn't a solution, but it's an alternative. – Ratsbane 7/7, 2015 at 20:47

If you are dead-set on keeping it disabled, you could create a hidden input on form submit and then populate it with the name and value of the select – Surfboarding 7/7, 2015 at 21:56

<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>

or you can use jQuery

$("#test option:not(:selected)").prop("disabled", true);

Words answered 20/3, 2013 at 2:50 Comment(2)

This is much better as it does not require unsetting disabled before submitting. – Chyme 3/6, 2013 at 19:10

Note, you need to add .not(":selected") before you set the property to keep the selected item enabled. – Chyme 3/6, 2013 at 19:24

My solution was to create a disabled class in CSS:

.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

and then your select would be:

<select name="sel" class="disabled">
    <option>123</option>
</select>

The user would be unable to pick any values but the select value would still be passed on form submission.

Pushy answered 15/4, 2016 at 20:12 Comment(2)

This way you can still navigate to the select using TAB and then change its selected option using keyboard up/down arrow keys. – Meagre 15/3, 2017 at 7:8

Also IE doesn't support pointer-events, you still can navigate using mouse. – Disillusion 24/3, 2017 at 9:23

If you can supply a default value for your selects, then you can use the same approach for unchecked check boxes which requires a hidden input before the actual element, as these don't post a value if left unchecked:

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

This will actually post the value "default" (without quotes, obviously) if the select is disabled by javascript (or jQuery) or even if your code writes the html disabling the element itself with the attribute: disabled="disabled".

Cyna answered 28/5, 2014 at 23:43 Comment(1)

Thinking this is a better to solution to the accepted answer.. Does anyone have any argument against that? – Unquestionable 8/3, 2019 at 11:3

Add a class .disabled and use this CSS:

.disabled {border: 1px solid #999; color: #333; opacity: 0.5;}
.disabled option {color: #000; opacity: 1;}

Demo: http://jsfiddle.net/ZCSRq/

Cetus answered 7/10, 2012 at 14:34 Comment(3)

Praveen, thanx, I already tried it, it's convinient enough, but "select" has arrow that opens list, and it is gray in disabled state. And isn't in enabled. – Microphyte 7/10, 2012 at 14:43

Sorry, my bad. Updated the answer @EL2002 please have a look. – Cetus 7/10, 2012 at 14:57

Thanx, but it doesn't look like disabled, sorry =( – Microphyte 7/10, 2012 at 15:10

One could use an additional hidden input element with the same name and value as that of the disabled list. This will ensure that the value is passed in $_POST variables.

Eg:

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>

Leporine answered 11/5, 2015 at 12:51 Comment(1)

This isn't a solution, but it's an alternative. – Ratsbane 7/7, 2015 at 20:46

Wow, I had the same problem, but a line of code resolved my problem. I wrote

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

I send the form to a php script then it prints the correct value for each options while it was "null" before.

Tell me if this works out. I wonder if this only works on mine somehow.

Ioannina answered 1/2, 2016 at 8:52 Comment(0)

if you don't want add the attr disabled can do it programmatically

can disable the edition into the <select class="yourClass"> element with this code:

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

if you want try it can see it here: https://jsfiddle.net/9kjqjLyq/

Ermina answered 18/10, 2017 at 14:34 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Demo: http://jsfiddle.net/ZCSRq/

Recommended topics

Hot tags