On my HTML page I have a few select menus which all share the class name .iconDropDownMenu and when the page is generated with PHP some of the select menus will have been hidden by PHP adding another class to the select menu.
Anyway I then wanted to disable only the hidden .iconDropDownMenu which I have been trying to use the following:
$(".iconDropDownMenu:hidden").each(function()
{
$(this).prop('disabled', true);
});
This runs without no errors but the disabled attribute does not show up on my select menu, thus not disabling input. So I did some research and found that I could use $(this).multiselect('refresh'); inside my .each() above after the first line. However I get an error TypeError: $(...).multiselect is not a function and this is the weird part it actually works, I can see the disabled attribute in the HTML but the error stops the rest of the JavaScript to run...
I also tried using $(this).selectmenu("refresh"); but get the following: Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh' and this also produces the same result, being the disabled attribute to the select menu is added whereas without this it did not before.
I tried to initialize the select menu but it just adds a span to the HTML and messes up select menu by showing the first selection as text outside the select menu?
I also tried to use PHP to output the "disabled" attribute to the select menu HTML but when loaded in the browser it does not show and is removed :/
Sounds like your JS may need to go into a $(document).ready();, here is an example ... https://jsfiddle.net/kennethcss/vkuhm93s/.