Запрет выбора более чем X элементов

Question

Я использую jQuery, чтобы позволить пользователю выбирать 3 временных блоков и не более.

После того, как они выбрали 3 блока, я бы хотел запретить их от выбора больше.

Мне, однако, не слишком повезло с этим.

Мой текущий код можно найти здесь: https://jsfiddle.net/1q8mzbwv/

Я пытаюсь увеличить значение selected_num и добавить возвращаемое значение false, но это не мешает выбору.

Я также хотел бы попытаться сделать это в обратном порядке, когда пользователь может щелкнуть выбранный элемент, и число тоже изменится.

jQuery код:

var selected_num = 0;

$('.time-block').click(function()
{
var id = $(this).data('id');
var chosen_time = $(this).data('time');

$(this).addClass('-chosen');

$('.time-selected-block').eq(selected_num).html(chosen_time);

if(selected_num == "3")
{
    return false;
}
else
{
    selected_num++;
}

console.log(selected_num);
})

Спасибо

Answer 1

В дополнение к предоставленному вам решению, вот несколько объяснений:

Ваши проблемы таковы:

1) Появляется это утверждение

$(this).addClass('-chosen');

до вашей оценки. Таким образом, класс добавляется до того, как условие может быть оценено.

2) Ваше условие работает, но оно проблематично c:

selected_num == "3"

Во-первых, вы хотите предотвратить Кроме того, если выбрано более 2: Если случайно выбрано 4, это позволит добавить 5-е и c.

Во-вторых, вы сравниваете selected_num, являющееся целым числом, со строкой. Эта строка преобразуется в целое число с помощью движка, поэтому это не имеет большого значения, но преобразование такого типа не следует делать, если оно не является преднамеренным и полезным.

3) Как вы видели в решении Евгения Горбункова , вы должны использовать «toggleClass», чтобы добавить или удалить класс в более коротком фрагменте.

Answer 2

Вы можете попробовать следующее:

$('.time-block').click(function () {
    if ($('.-chosen').length < 3 || $(this).hasClass('-chosen')) {
        $(this).toggleClass('-chosen')
    }
})

Вот модифицированный jsfiddle .