Demo of enable & disable method for menu in JQuery UI

  • Education
  • Job
  • Fruits
    • Mango
    • Banana
    • Orange
    • Apple
  • Vehicle
  • Games
    • Football
    • Tennis
      • Lawn Tennis
      • Table Tennis
    • Golf
    • Badminton
  • Dresses
Method


Change to enable or disable method to see the effect on menu .



HTML

<ul id='my_menu'>
<li><div>Education</div></li>
<li><div>Job</div></li>
<li><div>Fruits</div>
<ul>
<li><div>Mango</div></li>
<li><div>Banana</div></li>
<li><div>Orange</div></li>
<li><div>Apple</div></li>
</ul>
</li>
<li><div>Vehicle</div></li>
<li><div>Games</div>
<ul>
<li><div>Football</div></li>
<li><div>Tennis</div>
<ul>
<li><div>Lawn Tennis</div></li>
<li><div>Table Tennis</div></li>
</ul>
</li>
<li><div>Golf</div></li>
<li><div>Badminton</div></li>
</ul></li>
<li><div>Dresses</div></li>
</ul>

<div id=d1>Method  </div>

<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='enable'>enable</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='disable' >disable</label>
</div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#my_menu" ).menu({
 });
///////////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
 $( "#my_menu" ).menu( sel );
 $('#d1').html( " <b> " + sel + " Method</b>" );
})
////////
})</script>