jqxMenu disabled doesn't disable href clicks
Despite the menu entry being disabled, because the click event is not disabled, the disabled entry is still functional.
by JC Wren
HTML
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxMenu'>
<ul>
<li><a href="#">Home</a></li>
<li>About Us</li>
<li>Services</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">New</a>
<ul>
<li><a href="#">Corporate Use</a></li>
<li><a href="#">Private Use</a></li>
</ul>
</li>
<li><a href="#">Used</a>
<ul>
<li><a href="#">Corporate Use</a></li>
<li><a href="#">Private Use</a></li>
</ul>
</li>
<li><a href="#">Featured</a></li>
</ul>
</li>
<li id="Events"><a href="http://jqwidgets.com" target="_blank">Events</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div>
<input style="margin-top: 20px;" type="button" id='disableButton' value="Disable Events" />
<input style="margin-top: 20px; margin-left: 20px;" type="button" id='enableButton' value="Enable Events" />
</div>
JavaScript
$("#jqxMenu").jqxMenu({
width: 450,
height: 30,
theme: 'energyblue'
});
$("#disableButton").jqxButton({
height: '30px',
width: '120px',
theme: 'energyblue'
});
$("#enableButton").jqxButton({
height: '30px',
width: '120px',
theme: 'energyblue'
});
$('#disableButton').on('click', function () {
$('#jqxMenu').jqxMenu('disable', 'Events', true);
});
$('#enableButton').on('click', function () {
$('#jqxMenu').jqxMenu('disable', 'Events', false);
});