How to disable select when using jqTransform

Question

I'm using jqTransform in my form, and I want to disable select. jqTransform causes it not get disabled.

Please guide me if you have a solution for this.

Answer 1

Try this :

// To disable 
$('.someElement').attr('disabled', 'disabled');

or

  $('.someElement').attr("disabled", "true");

Answer 2

Maybe a little late, but here is my solution.

You have to disable the original select element (like mentioned earlier) and than remove the jqTransform element for this select and redo the jqTransform action.

I wrote a little function for my self to do this (which I also mentioned here: jqTransform Select - Ajax Update?).

function fix_select(selector) {
  selectedVal = $(selector).children(':selected').val();
  $(selector).children('option').removeAttr('selected');
  $(selector).children('option[value="'+selectedVal+'"]').attr('selected','selected');

  $(selector).removeClass('jqTransformHidden');
  $(selector).css('display','block');
  $(selector).prev('ul').remove();
  $(selector).prev('div.selectWrapper').remove();

  var selectElm = $(selector).closest('.jqTransformSelectWrapper').html();

  $(selector).closest('.jqTransformSelectWrapper').after(selectElm);
  $(selector).closest('.jqTransformSelectWrapper').remove();

  $(selector).closest('form').removeClass('jqtransformdone');
  $(selector).closest('form').jqTransform();
}

Call this function after you changed you select element (disabled it, added options via ajax oid).

fix_select('select#my_updated_select_box');

Answer 3

Very long time late, but my solution for this problem was that:

let elem = $('#realSelectElementID');
elem.css('disabled',true).prev('ul').css('pointer-events','none');

Disabling the real element and canceling any interaction with the list of options created by jqTransform plugin. With that, we maintain the component with the same aspect.