CODEWITHSUNDEEP
javascriptjqueryselectreadonly
bumbumpaw
bumbumpaw

Reputation: 2528

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

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');

Upvotes: 23

Views: 193858

Answers (5)

geevee
geevee

Reputation: 5461

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.

Upvotes: 25

Simon
Simon

Reputation: 604

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>

Upvotes: 16

Prabhagaran
Prabhagaran

Reputation: 3710

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..

Upvotes: 11

Perry Chiang
Perry Chiang

Reputation: 61

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

  1. Include readonly.js in your project. (also needs jquery)

  2. Replace .attr('readonly', 'readonly') with .readonly() instead. That's it.

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

Upvotes: 6

bumbumpaw
bumbumpaw

Reputation: 2528

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.

Upvotes: 13

Related Questions