根据其他元素jquery禁用元素上的click函数

Question

例子......一场NBA比赛。我希望用户在游戏中选择一个团队，一旦团队被点击并突出显示或给出一类边界，我希望对方团队不可点击。

让我们说.. team-A vs Team-B ..我点击团队B，团队B突出显示。现在team-A不可点击..直到我再次点击Team-B来切换删除边框/突出显示。如果我点击团队A，团队B将无法点击

我将如何做到这一点？

https://jsfiddle.net/mfvevgs5/5/

<div class="game game-1">
Game-1
  <div class="team road">
    <h3>
    Team-A
    </h3>
  </div>
  vs
  <div class="team home">
    <h3>
    Team-B
    </h3>
  </div>
</div>

<div class="game game-2">
Game-2
  <div class="team road">
    <h3>
    Team-C
    </h3>
  </div>
  vs
  <div class="team home">
   <h3>
    Team-D
    </h3>
  </div>
</div>

.border{
  border: 2px solid blue;
  width: 90px;
}

$('h3').on('click', function(){
    $(this).toggleClass('border');
});

Answer 1

您需要检查是否有任何类not this。

$('h3').on('click', function() {
  var selectedTeams = $(this).closest('.game').find('.team h3.border');
  if (selectedTeams.not(this).length == 0)
    $(this).toggleClass('border');
});

.border {
  border: 2px solid blue;
  width: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game game-1">
  Game-1
  <div class="team road">
    <h3>
    Team-A
    </h3>
  </div>
  <div class="team home">
    <h3>
    Team-B
    </h3>
  </div>
</div>

<div class="game game-2">
  Game-2
  <div class="team road">
    <h3>
    Team-C
    </h3>
  </div>
  <div class="team home">
    <h3>
    Team-D
    </h3>
  </div>
</div>

Answer 2

您可以添加CSS规则以禁用应禁用的团队上的指针事件。的 Here is a working Fiddle

$('h3').on('click', function(){
  $(this).closest('.game').find('h3').toggleClass('disable-team');
  $(this).toggleClass('disable-team').toggleClass('border');
});

.border{
  border: 2px solid blue;
  width: 90px;
}

.disable-team{
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game game-1">
Game-1
  <div class="team road">
    <h3>
    Team-A
    </h3>
  </div>
  <div class="team home">
    <h3>
    Team-B
    </h3>
  </div>
</div>

<div class="game game-2">
Game-2
  <div class="team road">
    <h3>
    Team-C
    </h3>
  </div>
  <div class="team home">
   <h3>
    Team-D
    </h3>
  </div>
</div>