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');
This question is related to
javascript
jquery
select
readonly
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.
<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>
$(function(){
var select_val = $('#sel_test option:selected').val();
$('#hdn_test').val(select_val);
$('#output').text('Selected value is: ' + select_val);
});
hope that helps.
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..
To simplify things here's a jQuery plugin that can achieve this goal : https://github.com/haggen/readonly
Replace .attr('readonly', 'readonly')
with .readonly()
instead.
That's it.
For example, change from $(".someClass").attr('readonly', 'readonly');
to $(".someClass").readonly();
.
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]_x000D_
{_x000D_
pointer-events: none;_x000D_
}_x000D_
_x000D_
_x000D_
/* irrelevent styling */_x000D_
_x000D_
*_x000D_
{_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
*[readonly]_x000D_
{_x000D_
background: #fafafa;_x000D_
border: 1px solid #ccc;_x000D_
color: #555;_x000D_
}_x000D_
_x000D_
input, select_x000D_
{_x000D_
display:block;_x000D_
width: 20rem;_x000D_
padding: 0.5rem;_x000D_
margin-bottom: 1rem;_x000D_
}
_x000D_
<form>_x000D_
<input type="text" value="this is a normal text box">_x000D_
<input type="text" readonly value="this is a readonly text box">_x000D_
<select readonly tabindex="-1">_x000D_
<option>This is a readonly select box</option>_x000D_
<option>Option 2</option>_x000D_
</select>_x000D_
<select>_x000D_
<option>This is a normal select box</option>_x000D_
<option>Option 2</option>_x000D_
</select>_x000D_
</form>
_x000D_
Source: Stackoverflow.com