javascript - Change to cursor:default on players with is-inactive class, only after others selected -

objective

• i have list of sixty hockey players have is-inactive cursor:pointer default state. div being referenced <div class="picked is-inactive">
• when player gets clicked on, it's "starred" , class switches is-active. there maximum number of players in each position (two goalies, 6 defensemen, twelve forwards).
• when max number has been reached, remaining players in position haven't been chosen / clicked on, should have cursor: default behaviour.

problem

right now, after maximum number of players in position have been selected, players not clicked , have is-inactive state still have cursor:pointer behaviour.

scripts.js

    /*-------------------------------------     count selected     --------------------------------------*/      function countselected() {         $(".player").on("click", function(){              // checks if maximum number of players have been selected             // if so, return false , nothing             // if not, class toggle `is-inactive` `is-active`             if ($(this).find(".picked.full").length > 0) return false;             $(this).find(".picked").toggleclass("is-inactive is-active");              // count number of players stars             var starredgoaltenders = $(".player--goalie").find(".picked.is-active").length;             var starreddefencemen = $(".player--defencemen").find(".picked.is-active").length;             var starredforwards = $(".player--forward").find(".picked.is-active").length;              console.log(starredgoaltenders, starreddefencemen, starredforwards);              // number of starred players each position cannot exceed following numbers             var maxgoaltenders = 2;             var maxdefencemen = 6;             var maxfowards = 12;              // if number of starred players hits max, class of `is-completed` adding corresponding checkmark indicate task has been completed             if (starredgoaltenders === maxgoaltenders) {                 $(".checkmark--goalie").addclass("is-completed");                 $(".player--goalie").find(".picked").addclass("full");             }              if (starreddefencemen === maxdefencemen) {                 $(".checkmark--defencemen").addclass("is-completed");                 $(".player--defencemen").find(".picked").addclass("full");             }              if (starredforwards === maxfowards) {                 $(".checkmark--forward").addclass("is-completed");                 $(".player--forward").find(".picked").addclass("full");             }              // if conditions met show submit vote button             if (starredgoaltenders === maxgoaltenders && starreddefencemen === maxdefencemen && starredforwards === maxfowards) {                 $(".btn--submit").show();                 $(".btn--submit").addclass("slideleft");             }         }); } countselected(); 

style.css

.player {   position: relative;   display: inline-block;   margin-top: 15px;   margin-right: 20px;   vertical-align: top;   cursor: pointer; } 

index.html

<div class="player player--goalie year--1990">                     <div class="tooltip tooltip--tall">                         <p class="tooltip__name">brian elder</p>                         <p class="tooltip__hometown"><span>hometown:</span> oak lake, man.</p>                         <p class="tooltip__years"><span>years played:</span> 1992-1997</p>                         <div class="tooltip__stats--inline">                             <div class="stats__group stats--games">                                 <p class="stats__header">gp</p>                                 <p class="stats__number stats__number--games">110</p>                             </div>                              <div class="stats__group stats--goalsag">                                 <p class="stats__header">ga</p>                                 <p class="stats__number stats__number--goalsag">2.00</p>                                 <p class="stats__number">3.12</p>                                 <p class="stats__number">3.46</p>                                 <p class="stats__number">2.70</p>                             </div>                              <div class="stats__group stats--savep">                                 <p class="stats__header">sav%</p>                                 <p class="stats__number stats__number--savep">.909</p>                                 <p class="stats__number">.886</p>                                 <p class="stats__number">.884</p>                                 <p class="stats__number">.906</p>                             </div>                              <div class="stats__group stats--shutouts">                                 <p class="stats__header">so</p>                                 <p class="stats__number">0</p>                                 <p class="stats__number">0</p>                                 <p class="stats__number stats__number--shutouts">3</p>                                 <p class="stats__number">2</p>                             </div>                         </div> <!-- tooltip__stats--inline -->                     </div> <!-- tooltip -->                     <div class="player__headshot player--elder">                         <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>                     </div>                     <p class="player__name">brian elder</p>                     <p class="player__position">goalie</p>                 </div> 

if players have is-inactive class , defined inside is-inactive class cursor: pointer property, going have cursor: pointer thingy enabled. have options:

• remove is-inactive class players not need have cursor.
• creating special class named f.e. pointercursor cursor: pointer property, , add , remove class when needed. (obviously removing property is-inactive class.

• i see when full, add full class. can add cursor: default property class, override other property. notice class override old one, must declared after first 1 in css file:

  .is-inactive {   cursor: pointer; } .full { // way, `full` override `is-active`.   cursor: default; }