jquery - 2がすでにクリックされている場合は、divをクリックできないようにします

Question

特定の量のdiv（クラス名.sqrBtn）でクリックイベントが発生しました。特定の時間に選択して表示するには、これらのdivのうち2つだけが必要です。選択されていない残りのdivをクリック不可にするにはどうすればよいですか？

これまでの私のコード：http：//jsbin.com/ucuha3/110/edit

Answer 1

jsFiddleデモ
クリックハンドラーを定義する場所の外側のスコープで変数を定義し、ハンドラーがトリガーされるたびに変数をインクリメントし、目的のクリック数に達したらリスナーを削除します。

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の場合は、何もしません。