jQuery UI Check Button doesn't stay Highlighted IE 8

Question

I am using the jQuery UI Button element with a Checkbox. The idea is that this works as a Toggle button. The button is pressed and stays in the 'pressed'/'active' state until it is clicked again, it is a effectively a checkbox with a button as a visual interface to the user.

My problem is that the button does not stay in the pressed state in Internet Explorer. It works correctly in other browsers. So when if I click the button, and then press anywhere else on the page, the button will now appear unpressed/default/inactive.

JavaScript:

$('#btnOptions').button({
    icons: {
        primary: "ui-icon-wrench"
    }
})


$('#btnOptions').click(function (event) {
    event.preventDefault();
    LoadOptions();
}); 

HTML:

<input type="checkbox" id="btnOptions" /><label for="btnOptions">Options</label>

Any ideas? Thanks

Answer 1

Well turns out I am an idiot!

This line of code it what was doing it:

 event.preventDefault();

I had this in there as a convention because when the buttons are links, I use that to prevent the page jumping to the top. However this time it was preventing the default behaviour!

So code that works is as follows:

$('#btnOptions').click(function (event) {
    LoadOptions();
});