disable a jQuery .toggle() method

I am looking for a way to disable a .toggle() attached to a div

if (condition) {
    $("#div").toggle(
        function() {
            do this
        },
        function() {
            do that
        }
    );
}
else {

    // How do I achieve this?
    $("#div").disableToggle(

    );
}

More explanation:

This is a map application. The toggle in question is bound to an image button. The map loads at zoom level 4. The user zooms in, and the button in question becomes active only when the user is zoomed in more than zoom level 6. Once 开发者_运维知识库the user zooms out to less than level 6, I want the toggle button to become inactive again.

Why not just unbind the click?

$('#div').unbind('click');

You could put condition inside of the function:

$("#div").toggle(
    function() {
        if (condition) {
            //do this
        }
    },
    function() {
        if (condition) {
            //do that
        }
    }
);

You can use .cleanData():

// this will destroy all data bound to that element
$.cleanData($("#div"));

Demo.

Here's a way:

Remove the class that is selected for toggling. Fiddle here : http://jsfiddle.net/leifparker/rSP34/2/

HTML

<div class="button_toToggle"> Toggle it! </div>
<div class="button_disableToggle"> Disable Toggle </div>
<div class="happyDiv togglable">&nbsp;</div>

JS

$('.button_toToggle').click(function(){
    $('.togglable').toggle();
});
$('.button_disableToggle').click(function(){
    $('.happyDiv').removeClass('togglable');
});

If you weren't passing anonymous functions to toggle(), you could use the technique described on this forum post to unbind the events.