How to disable webform select box with jQuery without resetting selection value to default I have a webform, below's a section of the form (the selection field)

&lt;select id="edit-submitted-bring-alcohol" name="submitted[bring-alcohol]" class="form-select"&gt;
    &lt;option value="yes" selected="selected"&gt;Yes&lt;/option&gt;
    &lt;option value="no"&gt;No&lt;/option&gt;
&lt;/select&gt;


I now use jquery to dynamically setup this field.

if (age &lt; 19) {
    $('#edit-submitted-bring-alcohol').val('no');
    $('#edit-submitted-bring-alcohol').prop('disabled', true);
}


This works great. When user entered their age, this method automatically change the selection to 'no' (if they are under 19), and disabled by itself. 
However, the problem I have now is that the submitted value I received is 'yes' when the selection field is disabled (apparently it chooses the default value).

So could anyone help me out?
You can do this by removing the 'selected' attribute first, and setting the new selected attribute, prior to disabling.

e.g: 

if (age &lt; 19) {
    $("#edit-submitted-bring-alcohol option:selected").removeAttr('selected');
    $("#edit-submitted-bring-alcohol option[value='no']").attr('selected', 'selected')
    $('#edit-submitted-bring-alcohol').val('no');
    $('#edit-submitted-bring-alcohol').prop('disabled', true);
}


Here's a jsfiddle link for tinkering: http://jsfiddle.net/AwUwt/

Edit: Alternatively, you can just hide the select box

if (age &lt; 19) {
    $("#edit-submitted-bring-alcohol option:selected").removeAttr('selected');
    $("#edit-submitted-bring-alcohol option[value='no']").attr('selected', 'selected')
    $('#edit-submitted-bring-alcohol').val('no');
    $('#edit-submitted-bring-alcohol').css('display', 'none');
}