I have a form that use jquery mobile to generate. I have a dropdown list that initially set to be disabled.

<div data-role="fieldcontain">
    <label for="role-edit" class="select">Project Role:</label>
    <select name="role-edit" id="role-edit" data-native-menu="false" disabled="disabled" class="edit-projectinput">     
        <option value="Admin">Admin</option>
        <option value="Project Manager">Project Manager</option>
        <option value="User">User</option>
    </select>
</div>

I would like to enable the disabled selectmenu using jquery. I tried

$(".edit-projectinput").selectmenu("enable");

But it doesn't work for me.

Could you please instruct me how to enable the disabled selectmenu, and if possible, show me how to disable one.

This is the demo: /

I have a form that use jquery mobile to generate. I have a dropdown list that initially set to be disabled.

<div data-role="fieldcontain">
    <label for="role-edit" class="select">Project Role:</label>
    <select name="role-edit" id="role-edit" data-native-menu="false" disabled="disabled" class="edit-projectinput">     
        <option value="Admin">Admin</option>
        <option value="Project Manager">Project Manager</option>
        <option value="User">User</option>
    </select>
</div>

I would like to enable the disabled selectmenu using jquery. I tried

$(".edit-projectinput").selectmenu("enable");

But it doesn't work for me.

Could you please instruct me how to enable the disabled selectmenu, and if possible, show me how to disable one.

This is the demo: http://jsfiddle/lightbringer/dpv2h/1/

• javascript
• jquery
• jquery-mobile

3 Answers 3

Just do :

$(document).ready(function(){
     $("select.edit-projectinput").selectmenu("enable");
});

Demo

Remeber than there will be 2 items with the class .edit-projectinput one the real select that is converted to select menu widget and then the one default selected span element in the widget, so just specifically select the one that matters. Your menu is already initialized just a matter of calling enable method on it.

You have to intialize selectmenu first,

$(".edit-projectinput").selectmenu().selectmenu("enable");

and also use unique class name for the select options.

I know this is an older post, but came across the same issue in my code and found the issue, so posting here for others. Everything I saw online said to use:

$("selectId").selectmenu("disable");

It didn't work. No error, just not disabling the menu. The fix was a simple # before the ID:

$("#selectId").selectmenu("disable");

Now it disables, no issue :)