Disabling Select Drop Down List using jQuery without ‘disabled’

Say you have a drop down list defined as a select tag:

<select id="dropdown">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected>Three</option>
</select>

You can very easily disable the drop down list with jQuery by adding a disabled property to the tag.

$('#dropdown').attr('disabled', 'disabled')

However, in doing that, the selected value of the drop down list is no longer posted back on a form submit. And some systems (such as SharePoint) may then persist the default value when saving changes, which in the example above is “1” instead of the selected “3”.

So instead of a straight forward disable, we’re forced to do some extra work to make sure the control remains disabled on the front end to the user, but still posts back the corrected selected value to the back end.

The JavaScript below achieves this:

Continue reading