How to disable specific jquery-ui selectmenu selections?

Question

I understand how to disable all selectmenu.

But I just want to disable several options inside it. How can i do this??

Answer 1

The documentation reads:

Selectmenu widgets provide a changeable style element replacement. It will act as a proxy server back to the original selection element , controlling its state for submitting or serializing the form

(a main attention).

This means that you can simply add the disabled attribute to the <option> that you want to disable in the HTML, and it will appear in the widgets after it is initialized.

---

As for the changes that you dynamically add to the original <select> element, it will not immediately appear in widgets - because, as you might imagine, a constant DOM request for changes in the original <select> probably lead to performance loss.

Therefore, we have the following:

refresh

Parses the source item and re-displays the menu. Handles any or items that have been added, deleted, or disabled.

All we need to do is make changes to the original <select> and update the call.

In this case, we must configure the parameters to disable using the appropriate selectors , disable them using attr() , and then call the update, as shown below:

 $(function() { $("#speed").selectmenu(); $("#first").attr("disabled", true); // any other selector as you wish $("#speed").selectmenu("refresh"); }); 

 label { display: block; margin: 30px 0 0 0; } select { width: 200px; } 

 <link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <label for="speed">Select a speed</label> <select name="speed" id="speed"> <option id="first">Slower</option> <!-- disabled by dynamically--> <option>Slow</option> <option selected="selected">Medium</option> <option disabled>Fast</option> <!-- disabled by default--> <option>Faster</option> </select>