как отключить все оставшиеся числа 5 раз случайным числом, как было выбрано

Question

Это javascript, который я использую для выбора номеров, добавляя класс active к любым выбранным номерам, я использую математику javascript, чтобы выбрать 5 номеров и добавить активный класс к любому нажатому номеру, но я хочу отключить все оставшиеся номера после 5 номеров были выбраны. спасибо за любую помощь, оказанную

41.207.248.188: 8088 / home

  [1]: http://41.207.248.188:8088/home


<div class="play-card">
                  <button type="button" class="close-play-card"><i class="fa fa-times"></i></button>
                  <div class="play-card-inner text-center">
                    <div class="play-card-header">
                      <span class="number-amount">Pick 5 Numbers</span>
                      <div class="header-btn-area">
                        <button type="button" id="random2" class="myBtn2">quick pick</button>
                        <input type="text" id="firstleg2" size="5" value="5" style="display:none"/>
                        <input type="text" id="secondleg2" size="1" value="1" style="display:none"/>
                        <button type="button" id="remove2">clear</button>
                      </div>
                    </div>
                    <div class="play-card-body play-card-body2">
                      <ul class="number-list">
                        <li class="select3" value="1">1</li>
                        <li class="select3" value="2">2</li >
                        <li class="select3" value="3">3</li>
                        <li class="select3" value="4">4</li>
                        <li class="select3" value="5">5</li>
                        <li class="select3" value="6">6</li >
                        <li class="select3" value="7">7</li>
                        <li class="select3" value="8">8</li>
                        <li class="select3" value="9">9</li>
                        <li class="select3" value="10">10</li>
                        <li class="select3" value="11">11</li>
                        <li class="select3" value="12">12</li>
                        <li class="select3" value="13">13</li>
                        <li class="select3" value="14">14</li>
                        <li class="select3" value="15">15</li>
                        <li class="select3" value="16">16</li >
                        <li class="select3" value="17">17</li>
                        <li class="select3" value="18">18</li>
                        <li class="select3" value="19">19</li>
                        <li class="select3" value="20">20</li>
                        <li class="select3" value="21">21</li>
                        <li class="select3" value="22">22</li>
                        <li class="select3" value="23">23</li>
                        <li class="select3" value="24">24</li>
                        <li class="select3" value="25">25</li>
                        <li class="select3" value="26">26</li>
                        <li class="select3" value="27">27</li>
                        <li class="select3" value="28">28</li>
                        <li class="select3" value="29">29</li>
                        <li class="select3" value="30">30</li>
                        <li class="select3" value="31">31</li>
                        <li class="select3" value="32">32</li>
                        <li class="select3" value="33">33</li>
                        <li class="select3" value="34">34</li>
                        <li class="select3" value="35">35</li>
                        <li class="select3" value="36">36</li>
                        <li class="select3" value="37">37</li>
                        <li class="select3" value="38">38</li>
                        <li class="select3" value="39">39</li>
                        <li class="select3" value="40">40</li>
                        <li class="select3" value="41">41</li>
                        <li class="select3" value="42">42</li >
                        <li class="select3" value="43">43</li>
                        <li class="select3" value="44">44</li>
                        <li class="select3" value="45">45</li>
                        <li class="select3" value="46">46</li >
                        <li class="select3" value="47">47</li>
                        <li class="select3" value="48">48</li>
                        <li class="select3" value="49">49</li>
                        <li class="select3" value="50">50</li>
                        <li class="select3" value="51">51</li>
                        <li class="select3" value="52">52</li>
                        <li class="select3" value="53">53</li>
                        <li class="select3" value="54">54</li>
                        <li class="select3" value="55">55</li>
                        <li class="select3" value="56">56</li>
                        <li class="select3" value="57">57</li>
                        <li class="select3" value="58">58</li>
                        <li class="select3" value="59">59</li>
                        <li class="select3" value="60">60</li>
                        <li class="select3" value="61">61</li>
                        <li class="select3" value="62">62</li>
                        <li class="select3" value="63">63</li>
                        <li class="select3" value="64">64</li>
                        <li class="select3" value="65">65</li>
                        <li class="select3" value="66">66</li>
                        <li class="select3" value="67">67</li>
                        <li class="select3" value="68">68</li>
                        <li class="select3" value="69">69</li>
                        <li class="select3" value="70">70</li>                                                       
                      </ul>
                      <span class="add-more-text">Select Special ball</span>
                      <ul class="number-list">
                        <li class="select4" value="1">1</li>
                        <li class="select4" value="2">2</li>
                        <li class="select4" value="3">3</li>
                        <li class="select4" value="4">4</li>
                        <li  class="select4" value="5">5</li>
                        <li  class="select4" value="6">6</li>
                        <li  class="select4" value="7">7</li>
                        <li  class="select4" value="8">8</li>
                        <li  class="select4" value="9">9</li>
                        <li  class="select4" value="10">10</li>
                        <li class="select4" value="11">11</li>
                        <li class="select4" value="12">12</li>
                        <li class="select4" value="13">13</li>
                        <li class="select4" value="14">14</li>
                        <li  class="select4" value="15">15</li>
                        <li  class="select4" value="16">16</li>
                        <li  class="select4" value="17">17</li>
                        <li  class="select4" value="18">18</li>
                        <li  class="select4" value="19">19</li>
                        <li  class="select4" value="20">20</li>
                        <li class="select4" value="21">21</li>
                        <li class="select4" value="22">22</li>
                        <li class="select4" value="23">23</li>
                        <li class="select4" value="24">24</li>
                        <li  class="select4" value="25">25</li>
                        <li  class="select4" value="26">26</li>
                      </ul>
                    </div>
                    <div class="play-card-footer">
                      <p class="play-card-footer-text">Selected Numbers:</p>
                      <div class="selected-numbers">
                     <p class="green" id="print2"> <input class="green"  type="textbox" style="text-align: center;"   name="play1" formControlName="play1" id="print2"  value="" ></p>
                      </div>
                    </div>
                  </div>
                </div>
    <script>
    function shuffle(array) {
        var m = array.length, t, i;

        // While there remain elements to shuffle…
        while (m) {

          // Pick a remaining element…
          i = Math.floor(Math.random() * m--);

          // And swap it with the current element.
          t = array[m];
          array[m] = array[i];
          array[i] = t;
        }

        return array;

      }


      $(function() {
          $("#random2").click(function() {
              var $all = $(".select3").removeClass("active");
           //  if counter <= 5
              $(shuffle($all).slice(0, $("#firstleg2").val())).addClass("active");
              var $all = $(".select4").removeClass("active");
              $(shuffle($all).slice(0, $("#secondleg2").val())).addClass("active");
          });
      });
        </script>
    <script>
      function shuffle(array) {
      var m = array.length, t, i;

      // While there remain elements to shuffle…
      while (m) {

        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
      }

      return array;
    }
      $(function() {
        $("#remove2").click(function() {
            var $all = $(".select3").removeClass("active");
            var $all = $(".select4").removeClass("active");
            document.getElementById("print2").innerHTML = "";
        });

      });
    </script>
    <script>
      $(document).ready(function(){
          $("#myBtn2").click(function(){
              var idArr = [];
              $(".active").each(function(){
                  idArr.push($(this).attr("value"));
              });

              // Join array elements and display in alert
              idArr.join(", ");
          document.getElementById("print2").innerHTML = idArr;
          });
      });
      </script>
    <script>
      $(document).ready(function() {
        $(".play-card-body2").on('click', function(){
        $(this).toggleClass("active");
        var idArr = [];
            $(".active").each(function(){
                idArr.push($(this).attr("value"));
            });

            // Join array elements and display in alert
            idArr.join(" ");
        document.getElementById("print2").innerHTML = idArr;
      });

    });
    </script>

Answer 1

Скрипт для отключения чисел, когда счетчик будет выглядеть примерно так

function disableNumbers() {
    var counter = $(".counter");
    if (counter.val() == 5) {
        alert("FIVE NUMBERS ARE SELECTED");
        $(".number-list").find("li").each(function () {
            $(this).addClass("disabled");
        })
    } else {
        counter.attr("value", parseInt(counter.val()) + 1);
        alert(counter.val());

    }
}

<input type="hidden" value="0" class="counter">
<button onclick="disableNumbers()">Reserve</button>

Но, конечно, чтобы этот фрагмент работал, вы должны включить jQuery

Answer 2

Вы можете использовать счетчик сценариев java, сначала проверьте, является ли класс 'active' для чисел = 5 den, отключите или установите оставшиеся числа с помощью класса "select", поскольку d может быть из вашего кода. помните, что не используйте счетчик событий щелчка, так как быстрый выбор также может дать вам 5 выбранных номеров одним щелчком мыши.