Only highlight one class

Ok, so when you click on .userGridViewItem it should make the element highlighted by doing toggleClass()

$(".userGridViewItem").live('click', function () {
     $(this).toggleClass("warnings_receiver_highlight");
});

This works fine. Now I would like to make a checker before the element gets highlighted.

I would like to do so you can only highlight the same warning-levels. (Yellow/No color is warning levels)

So if you have selected 1 yellow, you should not be able to select a non-color element, before you unmark the yellow element and then you can select the non-colored element.

The yellow/non-color has the classes: warningYellow, warningNone.

So all the non-warned before user开发者_Go百科s has the class warningNone, and all the warned users before has the class warnedYellow. And by this I want to determine and check so you only highlight one of them.

Little hard to explain.

One more example:

If you dont have highlighted anything, and you highlight one element that has the class warnedYellow, then you should only be able to hightlight another warnedYellow class (and give alert error if you click and try to highlight a warningNone class)

http://jsfiddle.net/xH8ME/3/

Here you can highlight(turns black) both yellow and none, you should only be able to highlight what you picked first. So if you pick yellow you should be able to highlight the other yellow but NOT the "none".. If you pick the "none" first then you should not be able to highlight any "yellow"

Probably you looking for something like this:

 $(".userGridViewItem").bind('click', function () {
        if ($('.warnings_receiver_highlight').length > 0) {
            if (($('.warnings_receiver_highlight').hasClass('warningYellow') &&
                $(this).hasClass('warningYellow')) ||
                ($('.warnings_receiver_highlight').hasClass('warningNone') &&
                 $(this).hasClass('warningNone'))
                ) {
                   $(this).toggleClass("warnings_receiver_highlight");        
            } else { 
                alert('error');
            }
        } else {
            $(this).toggleClass("warnings_receiver_highlight");        
        }
    });

http://jsfiddle.net/xH8ME/17/

$(".userGridViewItem").bind('click', function () {
   if(($('.warningYellow').hasClass('warnings_receiver_highlight') && $(this).hasClass('warningNone'))||$('.warningNone').hasClass('warnings_receiver_highlight') && $(this).hasClass('warningYellow')))
       return;
    $(this).toggleClass('warnings_receiver_highlight');
});

Got it? The class only will be toggled if no one are highlighted or just elements from same class are highlighted.