jquery - 当 2 已经被点击时使 div 不可点击

Question

我在一定数量的 div（类名 .sqrBtn）上触发了一个点击事件，我只需要其中两个 div 来显示在给定时间选择的。我怎样才能让未选择的 div 的其余部分无法点击？

到目前为止我的代码：http: //jsbin.com/ucuha3/110/edit

Answer 1

jsFiddle Demo
在定义点击处理程序的任何地方的外部范围内定义一个变量，并在每次触发处理程序时递增它，一旦达到所需的点击次数就删除侦听器。

var bol = 0;

$(".sqrBtn").click(function () {
    bol++;
    if (bol >= 2) {
        $(".sqrBtn").off('click');
    }
});

Answer 2

您可以这样做 - 通过检查所选 div 的长度

$(".sqrBtn").click(function () {
    var bol = $(".sqrBtn.selected").length < 2;
    // if less less than two selected or current one is selected
    if(bol || $(this).is('.selected')){
      $(this).toggleClass('selected');
    }
});

JSBIN

Answer 3

$(".sqrBtn").click(function () {
    if($(".sqrBtn.clicked").length < 2 && !$(this).hasClass('clicked')){
        $(this).addClass("clicked");
    }
 });

如果单击 div，则添加单击的类，如果 div 的总数为 2，则什么也不做。