jQuery .prop('disabled', true) ignores .val('myval')

Question

I'm using jQuery v1.4.4. I have a very simple form:

<select class="myselect" name="myselect">
<option value="-1" selected="selected">N/Av</option>
<option value="-2">N/Ap</option>
<option value="0">Available</option>
</select>

What I want to achieve is set the value to 0 (Available) and disable the select. So I do the following:

$('.myselect').val('0');
$('.myselect').prop('disabled', true);

The output is correct: Available is being selected and the select is disabled. When I submit the form however, the value of $_POST['myselect'] is -1. When I only use...

$('.myselect').val('0');

... the value of $_POST['myselect'] is 0 as expected.

So my question: is there a way to disable myselect and still set the value?

You are missing `'`, but maybe that is not the issue. Maybe is a typo when you wrote the question? — Ionut Necula, Feb 27 '17 at 11:26
Thanks for pointing that out, it was indeed a typo when writing the question. — Wim Mostrey, Feb 27 '17 at 11:28
Ok. However the behaviour doesn't match what you're doing. If the element is disabled its value will not be sent in the form POST. Are you sure you only have one control with that name? — Rory McCrossan, Feb 27 '17 at 11:29
*"I'm using jQuery v1.4.4."* ***Why?*** It's been out of date for **years**. — T.J. Crowder, Feb 27 '17 at 11:36

score 3 · Accepted Answer · edited May 23 '17 at 12:16

When I submit the form however, the value of $_POST['myselect'] is -1.

...

So my question: is there a way to disable myselect and still set the value?

That's what that code would do, but:

Disabled fields aren't included in form submissions*, so if you're getting -1 from $_POST['myselect'], it's coming from somewhere else — the browser won't have sent anything for myselect at all (unless you have another name="myselect" field you haven't shown).

If you want the field included in the form, don't disable it. Unfortunately, select elements don't support readonly, so you'll have to either remove the other options or use script to prevent the user from selecting them.

See also Himanshu Tyagi's answer pointing out that you're using an API call that isn't in jQuery v1.4.4.

* Relevant quote from the spec:

Let controls be a list of all the submittable elements whose form owner is form, in tree order.

Let the form data set be a list of name-value-type tuples, initially empty.

Loop: For each element field in controls, in tree order, run the following substeps:

If any of the following conditions are met, then skip these substeps for this element:

The field element has a datalist element ancestor.

The field element is disabled.

...

(my emphasis)

Thank you for pointing out that disabled fields aren't included in form submissions. Since the select tag doesn't support `readonly`, I found my answer in this Q: [HTML form readonly SELECT tag/input](http://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input). — Wim Mostrey, Feb 28 '17 at 11:19

score 1 · Answer 2 · edited Feb 27 '17 at 11:37

http://api.jquery.com/prop/

.prop is added since 1.6 and you are using 1.4, see the error log in the code

$('.myselect').val('0');
$('.myselect').prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select class="myselect" name="myselect">
<option value="-1" selected="selected">N/Av</option>
<option value="-2">N/Ap</option>
<option value="0">Available</option>
</select>

If you keep using jQuery 1.4.4, you need to use attr instead of prop:

$('.myselect').val('0');
$('.myselect').attr('disabled', "disabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select class="myselect" name="myselect">
<option value="-1" selected="selected">N/Av</option>
<option value="-2">N/Ap</option>
<option value="0">Available</option>
</select>

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

jQuery .prop('disabled', true) ignores .val('myval')

2 Answers2