Enabling and disabling menu options programmatically

A common requirement when working with menus is to either enable or disable an option based on whether it matches a particular set of conditions, for example, you might disable the printing option if printing is not available.

One would hope that there would be an option available to do this within the menu widget. Alas! there isn't. The only method available is to either disable or enable the whole menu, not a specific menu item. It's not a problem though, as we can achieve the same effect using the ui-state-disabled class and a little jQuery magic.

Add the following new <button> elements directly after the existing markup for the menu widget in menu2.html:

<p>
  <form>
    <input type="button" id="disableprint" value="Disable printing" />
    <input type="button" id="enableprint" value="Enable printing" />
  </form>
<p>

Next, change the <script> element so that it appears as follows:

<script...