disable click function on element depending on other element jquery

example..an NBA game. i want the user to choose a team within the game, once a team is clicked and highlighted or given a class of border, i want the opposite team to be un-clickable.

let say.. team-A vs Team-B.. i click on team-B, team-B is highlighted. now team-A is not clickable.. not until i click on Team-B again to toggle remove the border/highlight. and if i click on team-A, team-B will not be clickable

How would i go about doing this?

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');
});

Answers 1

  • You can add a CSS rule to disable the pointer events on the teams that should be disabled. 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>


Related Articles