Как активировать toggleClass ограниченное количество раз?

Question

[Расул Гитинов]

На этой странице есть список тегов, у которых добавляется класс при клике и они изменяют цвет.

Но как сделать так, чтобы могло активироваться не больше 5-ти тегов и если количество активных тегов 5, то все остальные теги (не выделенные) становились серыми?

В данный момент там стоит такой код:

$(function() {
	$('.interests__item').click(function(){
		$(this).toggleClass('interests__item_active');
	});

	$('.interests__button').click(function(){
		$('.interests__item').addClass('interests__item_confirmed');
	});
});

Answer 1

[Алексей]

$('.interests__item').click(function(){
        if ( $('.interests__item_active').length < 5 )
            $(this).toggleClass('interests__item_active');
});

Comments

[Расул Гитинов]

Спасибо большое! То, что нужно

[Алексей]

Расул Гитинов: Подправил чуток, должно быть строгое условие меньше 5, а не меньше и равно 5.

[Расул Гитинов]

Алексей: А как сделать, чтобы если уже больше 5-ти, при повторном нажатии на тег он деактивировался и можно было например другой выбрать?

[Алексей]

Расул Гитинов:
Наверное так, но не проверял

$('.interests__item').click(function(){
        if ( $('.interests__item_active').length <=5 )
            $(this).toggleClass('interests__item_active');
        else if $(this).hasClass('interests__item_active')
            $(this).toggleClass('interests__item_active');
    });

[Расул Гитинов]

Алексей: Да, работает, но не совсем так. Если выбрал пять тегов, все остальные становятся серыми и уже выбранные теги можно отключать, но при отключении тега (то есть если количество активных меньше 5-ти) все серые теги должны опять становиться синими. Никак не могу понять как сделать

[Алексей]

Расул Гитинов: я так понял уже получилось?

[Расул Гитинов]

Алексей: Да, все заработало. Я добавил его к правильным ответам

Answer 2

[Расул Гитинов]

$(function() {
	$('.interests__item').click(function(){
		if ( $('.interests__item_active').length < 5 )
			$(this).toggleClass('interests__item_active');
		else if ($(this).hasClass('interests__item_active'))
			$(this).toggleClass('interests__item_active');
	});

	$('.interests__item').click(function(){
		if ( $('.interests__item_active').length >= 5 )
			$('.interests__item').addClass('interests__item_confirmed');
		else {
			$('.interests__item').removeClass('interests__item_confirmed');
		}
	});
});

Answer 3

[ThunderCat]

if($('.interests__item_active').length  >= 5) {$('.interests__item').attr("disabled", true);}