Sample code here, how to make it so that I could select any three elements, and then I could not choose?

jsfiddle

$(document).ready(function() { $('.row').on('click', function() { $(this).toggleClass('active'); }); }); 
 .container { display: flex; width: 100px; height: 25px; margin: 0 auto; background-color: red; justify-content: space-between; } .row { display: inline-block; width: 15px; height: 25px; background-color: blue; } .row.active { background-color: green; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div>

    1 answer 1

    At the same time can not be more than three .row.active ? Make a check:

     $('.row').on('click', function(){ var activeRowsCount = $('.row.active').length if (activeRowsCount < 3 || $(this).hasClass("active")) { $(this).toggleClass('active'); } });
    • Simultaneously there can be 3, i.e. from 1 to 3 inclusive. - bla bla213213213
    • thanks a lot!)) - bla bla213213213
    • This is how the code in the response works, check. - Klimenkomud
    • @StanislavKremsa Please :) If the answer is right for you, mark it with the right one by clicking on the gray check mark. - Klimenkomud
    • @Klimenkomud So the user can turn off the "active" when there are three of them? - Igor