Options that are dynamically set to 'disabled' via jQuery are not working in JQM

Options that are dynamically set to 'disabled' via jQuery are not working in JQM

Hello. I am utilizing the following code as part of my JQM application:

  2. <script type="text/javascript">
  3. $(function () {
  4. var selects = $('select.magic-select');
  5. $(selects).bind('change', function (evt) {
  6. var newVal = $(this).val(), oldVal = $(this).data('old-val');

  8. if (newVal != 0) {
  9. $(selects).not(this).find('option[value="' + newVal + '"]').attr('disabled', 'disabled');
  10. }

  12. $(selects).not(this).find('option[value="' + oldVal + '"]').removeAttr('disabled');
  13. $(this).data('old-val', newVal);
  14. });
  15. });
  16. </script>
Basically, it disables values in multiple (other) select menus when selected in the first menu. It works fine when jQuery Mobile is not utilized, but as soon as I enable jQuery mobile, it stops working and users are able to select the same option for all of the available dropdowns (which we are trying to prevent).

I took the code to do this from a Stack Overflow posting, so I am unsure what piece is causing the conflict.

Currently on JQM 1.2.0. Thanks in advance for any assistance you can provide!