Question

I have a function that navigates to another frame of a horzonital silder..

function goto(id, t) {
    //animate to the div id.
    $(".HozSlidercontentbox-wrapper").animate({ "left": -($(id).position().left) }, 600);

    // remove "active" class from all links inside #nav
    $('#HozSlidernav a').removeClass('active');

    // add active class to the current link
    $(t).addClass('active');
}

I want to be able to diable this functionality when the checkbox “Clone” is checked..

<li class="HozSlider_li"><a id="hypHozSliderMobile" class="HozSlider_a" href="#" onclick="goto('#HozSlider_mobile', this); return false">Mobile</a></li>

<li class="HozSlider_li"><label><input type="checkbox" onclick="DisableGoto()"><span style="color:#0073BF;font-weight:bold">Clone</span></label></li>

How do I write the function DisableGoto so when engaged the onClick of hypHozSliderMobile wont do anything (its disabled) ?

Answer 1

A better way would be to check the state of the checkbox in your function. And do nothing if it’s checked.

function goto(id, t) { 

    if(!$('#cloneCheckbox').is(':checked')) {
        $(".HozSlidercontentbox-wrapper").animate({ "left": -($(id).position().left) }, 600);

        // remove "active" class from all links inside #nav
        $('#HozSlidernav a').removeClass('active');

        // add active class to the current link
        $(t).addClass('active');
    }
}

Also you will need to give your checkbox the ID.

<li class="HozSlider_li"><a id="hypHozSliderMobile" class="HozSlider_a" href="#" onclick="goto('#HozSlider_mobile', this); return false">Mobile</a></li>

 <li class="HozSlider_li"><label><input id="cloneCheckbox" type="checkbox" onclick="DisableGoto()"><span style="color:#0073BF;font-weight:bold">Clone</span></label>