CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Troy Bryant
Troy Bryant

Reputation: 1024

Toggle class on and off

I have some links on a page. When the metro link is clicked the state links should be disabled. When the county link is clicked it then should renable the links. Using the add and remove class via jquery worked but only one time. I moved on to using the toggle class and both the county and metro link can toggle the links off and on. I create a fiddle also for better explanation.

http://jsfiddle.net/8u4jw72h/

here is the java script

function stateSelection(evt) {       
app.map.on("load", function () {

    $('.state-link').on('click', function () {

        switch (params.region_code) {
            case 9:
                zoomTo = conn;
                break;
            case 23:
                zoomTo = maine;
                break;
            case 25:
                zoomTo = mass;
                break;
            case 44:
                zoomTo = rhode;
                break;
        }
        app.map.centerAndZoom(zoomTo, 8);
        $('#btnModelReset').click();           

    });
    if (app.map.getZoom() <= 7) {            
        app.map.graphics.clear();
    }

    dojo.connect(dojo.byId('ctyRegion'), 'onclick', function () {
        app.map.centerAndZoom(home, 7);            
        enable();
    });
    dojo.connect(dojo.byId('msaRegion'), 'onclick', function () {
        app.map.centerAndZoom(home, 7);                                  
        disable();                       
    });

});//end load  
}//end state selection

function disable() {
$(".state-link").toggleClass('disableClass');
}
function enable() {
$(".state-link").toggleClass('enableClass');
}

and here is the css

a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}

a:link, a:visited,
a:active, a:hover {
    color: #333;
}

a:hover {
    background-color: #c7d1d6;
}

.disableClass{
pointer-events:none;
text-decoration:none;
opacity: 0.4;
cursor:default;
}

.enableClass{
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;    
opacity:1;
pointer-events:all;
cursor:default;
}

Upvotes: 0

Views: 1445

Answers (2)

hex494D49
hex494D49

Reputation: 9235

Or simply use only one class and the snippet below

$('#msaRegion').click(function () {
    $(".state-link").addClass('disableClass');
});
$('#ctyRegion').click(function () {
    $(".state-link").removeClass('disableClass');
});

jsFiddle

Upvotes: 1

Wilfredo P
Wilfredo P

Reputation: 4076

You forget remove the old class, try:

$('#msaRegion').click(function () {
    $(".state-link").removeClass('enableClass').addClass('disableClass');
});
$('#ctyRegion').click(function () {
    $(".state-link").removeClassClass('disableClass').addClass('enableClass');
});

Upvotes: 2

Related Questions