jQuery UI Accordion - Cancel Change

Introduction

jQuery UI Accordion is a great control out-of-the-box but as usual it's not enough, we always need more!
So here's the thing: I needed a simple way, without much hacking, to let me handle if the user could expand/collapse a panel or not.
If you look around, there are some ideas but I couldn't find one that actually consistently worked so here's my way of doing it.

Using the Code

The idea is to handle the header click and this way decide to activate the panel or not. In the sample code, just use the checkbox to lock or unlock the panels activation.

Here's the jsfille link and the same code below.

HTML

<input id="chkLock" type="checkbox"/>
<label for="chkLock">Lock Accordion</label>

<div id="myaccordion">
    <h3>Header 1</h3>
    <div>Content 1</div>
    <h3>Header 2</h3>
    <div>Content 2</div>
    <h3>Header 3</h3>
    <div>Content 3</div>
</div>

JavaScript

$('#myaccordion').accordion();

$("#myaccordion h3")
    .off('click')
    .on('click', function(){
        if ($('#chkLock').prop('checked') == false) {
            var index = $('#myaccordion h3').index(this);
            $('#myaccordion').accordion("activate", index);
        }
    });

Points of Interest

There are always multiple ways of doing the same thing, the difficulty is finding the simplest one.

History

First version!
Hope to hear from you guys about even simpler solutions!