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