javascript - 防止选择超过 X 个元素

Question

我使用 jQuery 允许用户选择 3 个时间 block ，仅此而已。

一旦他们选择了 3 个区 block ，我就想阻止他们选择更多区 block 。

然而，我并没有太幸运。

我当前的代码可以在这里找到: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

您可以尝试以下方法:

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

这是modified jsfiddle .