Lock HTML select element, allow value to be sent on submit

Question

I have a select box (for a customer field) on a complex order form, when the user starts to add lines to the order they should not be allowed to change the customer select box (unless all lines are deleted).

My immediate thought was that I could use the disabled attribute, but when the box is disabled the selected value is no longer passed to the target.

When the problem arose a while ago one of the other developers worked around this by looping through all the options and disabling all but the selected option, and sure enough the value was passed to the target and we've been using since. But now I'm looking for a proper solution, I don't want to loop through all the options because are data is expanding and it's starting to introduce performance issues.

I'd prefer not to enable this / all the elements when the submit button is hit.

How can I lock the input, whilst maintaining the selected option and passing that value to the target script? I would prefer a non-JavaScript solution if possible, but if needed we are running jQuery 1.4.2 so that could be used.

Edit

I've tried to use the readonly attribute with little success, here's the jQuery code I'm using:

$('.abc').each(function(element) {
    $(this).attr('readonly','readonly');
});

When inspecting the element with Firebug the readonly attribute had been set, but I can still change the value in the select box?!

Praline

I had similar situation , what I done was, enabled the tag just before submission using java script ( User will not get a chance to modify ) – Annemarie

Answer 1

This works:

$('.abc :not(:selected)').attr('disabled','disabled');

jQuery will still be looping through the elements behind the scenes, but I seriously doubt you will have performance issues unless your select has thousands of elements (in which case your usability issues will far out weigh the performance issues). The original code must have been doing something wrong.

Coopery

Thousands of options isn't far off ;-), usability isn't a problem as each item is prefixed with a unique code of which the user will know, selecting the box and overtyping (after lots of user testing) seems to work for us. – Praline

To be fair I guess the jQuery UI autocomplete might be a better option, I think this uses a textbox and therefor can be readonly / disabled :) – Praline

Your solution (whilst the same as my original) seems to remain the best option. I don't fancy using a hidden field at this stage. My decision may change if a better solution is given :-) – Praline

.prop('disabled',true); – Varini

Answer 2

This works fine

<select disabled="true">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">thre</option>
</select>

Adolf

Answer 3

Add a hidden field to your form and onsubmit take the value from the select and place it in the hidden field's value

As per the HTML spec, readonly is not supported by the select tag

Fontanez

Thanks for your answer, this had crossed my mind, I'll certainly be investigating this if it's the only thing that's going to work. – Praline

I saw your comment in the other answer, I didn't think it existed either. I don't see why there isn't a mix of both? – Praline

Only INPUT type=text, INPUT type=password and TEXTAREA seem to support the attribute so I'm guessing its for text input only. Does seem an oversight though. – Fontanez

Answer 4

The element does not accept readonly attribute. Readonly is a wrapper that fix this.
Try this:
https://github.com/haggen/readonly

Nidify

Answer 5

"select" does not have a readonly attribute. It has only disabled attribute.

http://www.w3schools.com/TAGS/att_select_disabled.asp

So your best best is:

$('.abc').each(function(element) {
    $(this).attr('disabled','disabled');
});

HTH

Kraus

Cheers, like I said to @CResults, a bit strange that this doesn't exist. Thanks anyway :) – Praline

Answer 6

A simple way to disable any Select is to just disable mouse interaction.

For example:

<select id="complaint_status" name="complaint_status" class="disabledSelect" value="Pending">
<option value="Pending" selected>Pending</option>
<option value="Complete">Complete</option></select>

css

.disabledbutton {
pointer-events: none;
opacity: 0.4;}

The value of Select will be SUBMITted. Hope it works!!

Trilobate

Answer 7

I'd have an idea, that was functional to me:

In my case, when a user selects an option (an account) in a drop-down on a form of an accounting system, e.g., some kind of "expense", that I know that may not be "credited", just "debited", another drop-down that selects the accounting operation (Debit/Credit), changes these drop-down to "Debit".

Then, I "lock" (using "disabled=true") these last "drop-down" in the "debit" option.

The problem that occurred to me these moment, was similar of yours: after disabling the drop-down element, I couldn't receive it in the target, anymore.

So, what I've done:

1 - Changed the option in the second drop-down list, as I said:

document.getElementById("operation").value = "D";

` 2 - Disabled that dropdown:

document.getElementById("operation").disabled = true;

Then, the "cat salt":

3a- Added to the "FORM" element, an "onsubmit"

onsubmit = "validForm()"

3b - On my [java-script] file I added the ["valid-Form"] function:

function validForm()
{
    document.getElementById("operation").disabled = false;
}

Voilá!

Kinlaw