How to disable opening of dropdown in select box in jQuery Mobile

Question

I am using Jquery Mobile for showing drop-down for select box.

<select id="category_type" multiple="multiple" class="category" tabindex="-1" placeholder="Category">
<option></option>
.
.
</select>

In some condition I need to restrict opening of the drop-down of select box when clicked.

I tried with

jQuery("#category_type").bind( "change", function(e) {
   jQuery.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
   e.preventDefault();
});

But not effective. How can it be possible?. Thanks in advance

Answer 1

Note : Here is the working DEMO

HTML Part:

<div data-role="fieldcontain">
    <button id="disable_select">Disable</button>
    <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

JS Part:

$("#disable_select").click(function() {
    $("#select-choice-1").attr("disabled","disabled");
});

Right now I have added a button to disable the dropdown on click of that button, you can add your condition to disable it.