Purpose

• There is a pool of sixty hockey players, each initially marked as is-inactive with cursor:pointer set as their default state. The specific div mentioned is

  <div class="picked is-inactive">

• When a player is selected by clicking on them, they become "starred" and transition to the is-active class. There is a limit on the number of players in each position (two goalies, six defensemen, twelve forwards).
• Once the maximum allowed number of players for a position have been chosen, the remaining players in that category, which were not picked, should revert to having a cursor: default behavior.

Issue

Presently, even after reaching the maximum number of selected players in a position, those who were not clicked and remain in the is-inactive state still retain the cursor:pointer functionality.

scripts.js

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

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

            // Verifies if the maximum player limit has been reached
            // If so, it will return false and take no action
            // Otherwise, it toggles between `is-inactive` and `is-active` classes
            if ($(this).find(".picked.full").length > 0) return false;
            $(this).find(".picked").toggleClass("is-inactive is-active");

            // Counting the starred players in each position
            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 maximum expected number of starred players per position
            var maxGoaltenders = 2;
            var maxDefencemen = 6;
            var maxFowards = 12;

            // When the maximum limit is hit, an `is-completed` class is added to indicate completion
            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");
            }

            // Display submit vote button when all conditions are met
            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>