Setting cursor to default for elements with is-inactive class

Question

Objective

Once the maximum number of players (two goalies, six defensemen, twelve forwards) in each of their categories have been chosen, the remaining players picked with the class is-inactive should been set to cursor:default

Clarification of the problem

All the players have the class is-inactive as a default, and what I'm trying to do is trying to set cursor: default only after other players have been picked and have had their class switched to is-active.

ie. Two goalies are picked and now have the class of is-active and take the cursor:pointer behaviour on hover. There are a total of ten players in this category, the other eight goalies are is-inactive and should have the cursor: default behaviour.

Problem

I'm trying to switch the css for the cursor back to it's default, but even players with is-inactive still have the cursor: pointer on them

style.css

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

index.html


  
    Brian Elder
    Hometown: Oak Lake, Man.
    Years Played: 1992-1997
    
      
        GP
        110
      

      
        GA
        2.00
        3.12
        3.46
        2.70
      

      
        SAV%
        .909
        .886
        .884
        .906
      

      
        SO
        0
        0
        3
        2
      
    
 
  
 
  
    
  
  Brian Elder
  Goalie

scripts.js

/*-------------------------------------
COUNT SELECTED
--------------------------------------*/

function countSelected() {
    $(".player").on("click", function(){

        // Checks if the maximum number of players have been selected
        // If so, return false and then do nothing
        // If not, the class will toggle from `is-inactive` to `is-active`
        if ($(this).find(".picked.full").length > 0) return false;
        $(this).find(".picked").toggleClass("is-inactive is-active");

        // Count the number of players with 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);

        // The number of starred players for each position cannot exceed the following numbers
        var maxGoaltenders = 2;
        var maxDefencemen = 6;
        var maxFowards = 12;

        // If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the 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 all the conditions are met show the submit vote button
        if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
            $(".btn--submit").show();
            $(".btn--submit").addClass("slideLeft");
        }
    });
} countSelected();

Cameron637 · Accepted Answer

If you don't mind a javascript solution, adding a class to the .is-inactive players after the first click of a player will provide a solution.

EDIT I was a little off with my first example because the .is-inactive and .is-active classes apply not to the .player objects but to descendants, however the following snippet provides the correct implementation:

SECOND EDIT After some discussion with the OP about his expectations, the following implementation better suits his needs. I moved the .is-active and .is-inactive classes to the .player elements and then added the following lines to the click function:

$(".player").filter(".is-active").removeClass("not-picked");
$(".player").filter(".is-inactive").addClass("not-picked");

And this to the CSS:

.not-picked {
  cursor: default;
}

So that now whenever a player is clicked, it will select or deselect that player and the cursor will change unless the player-type (i.e. goalie) is full.

/*-------------------------------------
COUNT SELECTED
--------------------------------------*/

function countSelected() {
    $(".player").on("click", function(){
        // Checks if the maximum number of players have been selected
        // If not, the class will toggle from `is-inactive` to `is-active`
        if ($(this).hasClass("full")) return false;
        $(this).toggleClass("is-inactive is-active");
        $(".player").filter(".is-active").removeClass("not-picked");
        $(".player").filter(".is-inactive").addClass("not-picked");
        // Count the number of players with stars
        var starredGoaltenders = $(".player--goalie").filter(".is-active").length;
        var starredDefencemen = $(".player--defencemen").filter(".is-active").length;
        var starredForwards = $(".player--forward").filter(".is-active").length;

        console.log(starredGoaltenders, starredDefencemen, starredForwards);

        // The number of starred players for each position cannot exceed the following numbers
        var maxGoaltenders = 2;
        var maxDefencemen = 6;
        var maxFowards = 12;

        // If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
        if (starredGoaltenders === maxGoaltenders) {
            $(".checkmark--goalie").addClass("is-completed");
            $(".player--goalie").addClass("full");
        }

        if (starredDefencemen === maxDefencemen) {
            $(".checkmark--defencemen").addClass("is-completed");
            $(".player--defencemen").addClass("full");
        }

        if (starredForwards === maxFowards) {
            $(".checkmark--forward").addClass("is-completed");
            $(".player--forward").addClass("full");
        }

        // If all the conditions are met show the submit vote button
        if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
            $(".btn--submit").show();
            $(".btn--submit").addClass("slideLeft");
        }
    });
} countSelected();

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

.not-picked {
  cursor: default;
}



  
    Brian Elder
    Hometown: Oak Lake, Man.
    Years Played: 1992-1997
    
      
        GP
        110
      

      
        GA
        2.00
        3.12
        3.46
        2.70
      

      
        SAV%
        .909
        .886
        .884
        .906
      

      
        SO
        0
        0
        3
        2
      
    
 
  
 
  
    
  
  Brian Elder
  Goalie



  
    Brian Elder
    Hometown: Oak Lake, Man.
    Years Played: 1992-1997
    
      
        GP
        110
      

      
        GA
        2.00
        3.12
        3.46
        2.70
      

      
        SAV%
        .909
        .886
        .884
        .906
      

      
        SO
        0
        0
        3
        2
      
    
 
  
 
  
    
  
  Brian Elder
  Goalie



  
    Brian Elder
    Hometown: Oak Lake, Man.
    Years Played: 1992-1997
    
      
        GP
        110
      

      
        GA
        2.00
        3.12
        3.46
        2.70
      

      
        SAV%
        .909
        .886
        .884
        .906
      

      
        SO
        0
        0
        3
        2
      
    
 
  
 
  
    
  
  Brian Elder
  Goalie