how to set select element as readonly ('disabled' doesnt pass select value on server)

Question

When i used any of the following code ,select element do looks like disabled,but the select is not pass on the server : Im thinking of the readonly to be used, but i dont know or is that will solved the issue. Any help is much appreciated.

$('#selectID').prop('disabled',true);

$('#selectID').prop('disabled','disabled');

$('#selectID').attr('disabled',true);

$('#selectID').attr('disabled','disabled');

possible duplicate of [HTML form readonly SELECT tag/input](http://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input) — Yury Tarabanko, Aug 14 '14 at 06:09
@monkeyinsight see this, is not working http://jsfiddle.net/59wLyk3n/ — bumbumpaw, Aug 14 '14 at 06:11
Why do you show a select if you don't want to change the values? I think it is an other solution to show only one item in the select. — István Döbrentei, Jun 04 '20 at 07:40

score 24 · Answer 1 · edited Jul 03 '21 at 14:27

24

see this answer - HTML form readonly SELECT tag/input

You should keep the select element disabled but also add another hidden input with the same name and value.

If you reenable your SELECT, you should copy it's value to the hidden input in an onchange event.

see this fiddle to demnstrate how to extract the selected value in a disabled select into a hidden field that will be submitted in the form.

$(function() {
  var select_val = $('#sel_test option:selected').val();
  $('#hdn_test').val(select_val);
  $('#output').text('Selected value is: ' + select_val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select disabled="disabled" id="sel_test">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<input type="hidden" id="hdn_test" />
<div id="output"></div>

hope that helps.

edited Jul 03 '21 at 14:27

vsync

118,978
58
307
400

answered Aug 14 '14 at 06:06

geevee

5,411
5
30
48

can you give me fiddle or exaple on how to used this work around? – bumbumpaw Aug 14 '14 at 06:07
Why not simply close the question as a dup? – Yury Tarabanko Aug 14 '14 at 06:09
@GalV,is that will pass on server? what value should be pass if i dont disabled the select? see this http://jsfiddle.net/9s3osa46/1/ – bumbumpaw Aug 14 '14 at 06:21
it depends, how do you pass the data to the server? is it a
? is it AJAX? usually, when using FORM, you should give the html element a name attribute. when using ajax, you decide what to pass to the server in a dictionary of parameters.
– geevee Aug 14 '14 at 06:32
when you submit a form, every element in the form with the `name` attribute will be sent to server. you need to make sure that only 1 of the elements will hold that name at a single time (start with the name att. on the `select` element, and if it's changed, move the `name` att. to the hidden field) – geevee Aug 14 '14 at 08:08
Hello @GalV, i dont want the hidden as work around. any other idea? – bumbumpaw Aug 15 '14 at 08:26

score 15 · Answer 2 · answered Jan 30 '20 at 15:33

You can simulate a readonly select box using the CSS pointer-events property:

select[readonly]
{
    pointer-events: none;
}

The HTML tabindex property will also prevent it from being selected by keyboard tabbing:

<select tabindex="-1">

select[readonly]
{
    pointer-events: none;
}


/* irrelevent styling */

*
{
  box-sizing: border-box;
}

*[readonly]
{
  background: #fafafa;
  border: 1px solid #ccc;
  color: #555;
}

input, select
{
  display:block;
  width: 20rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

<form>
  <input type="text" value="this is a normal text box">
  <input type="text" readonly value="this is a readonly text box">
  <select readonly tabindex="-1">
    <option>This is a readonly select box</option>
    <option>Option 2</option>
  </select>
  <select>
    <option>This is a normal select box</option>
    <option>Option 2</option>
  </select>
</form>

You can't use pointer-events: none. That will prevent the element from receiving focus on click. (This is important for an accessibility reason.) Also, using tabIndex to prevent focus is a terrible idea. Blind or visually impaired users will not be able to read the content of the field anymore, or not even notice that the field is there. — CookieEater, Aug 09 '20 at 11:08

score 13 · Accepted Answer · answered Mar 14 '15 at 01:15

13

To be able to pass the select, I just set it back to :

  $('#selectID').prop('disabled',false);

or

  $('#selectID').attr('disabled',false);

when passing the request.

answered Mar 14 '15 at 01:15

bumbumpaw

2,522
1
24
54

1

.removeAttr() should be used instead – zgr024 Jul 06 '16 at 20:46
1

If you disable, it is no longer sent in the form, it has to be 'readonly'. – Palomita Yañez Quiroz Sep 20 '19 at 16:32
@PalomitaYañezQuiroz, that's the point above - when the form is submitted, just before it goes out, you manually turn off the "disable" part. – userfuser Nov 26 '19 at 09:57

Prabhagaran · Answer 4 · 2016-11-21T06:56:25.910

11

without disabling the selected value on submitting..

$('#selectID option:not(:selected)').prop('disabled', true);

If you use Jquery version lesser than 1.7
$('#selectID option:not(:selected)').attr('disabled', true);

It works for me..

edited Nov 21 '16 at 06:56

answered Aug 23 '16 at 07:54

Prabhagaran

3,620
1
19
19

Worked perfectly! Can still submit with values, without user being able to change selection. TY! – TECC1 Apr 02 '21 at 13:10
1

This should be the answer. Works perfectly! – alvinchesaro Feb 21 '22 at 20:40

score 6 · Answer 5 · edited Jun 18 '15 at 04:07

6

To simplify things here's a jQuery plugin that can achieve this goal : https://github.com/haggen/readonly

Include readonly.js in your project. (also needs jquery)
Replace .attr('readonly', 'readonly') with .readonly() instead. That's it.

For example, change from $(".someClass").attr('readonly', 'readonly'); to $(".someClass").readonly();.

edited Jun 18 '15 at 04:07

josliber

43,891
12
98
133

answered Jun 18 '15 at 02:25

Perry Chiang

61
1
3

how to set select element as readonly ('disabled' doesnt pass select value on server)

5 Answers5