disable click function on element depending on other element jquery

Question

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

Rajshekar Reddy · Accepted Answer · 2016-03-25 08:28:16Z

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>

answered Mar 25, 2016 at 8:28

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BenG · Accepted Answer · 2016-03-25 08:19:58Z

You need to check if any has the class which is 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>

Collectives™ on Stack Overflow

disable click function on element depending on other element jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related