Occur if 3 button are clicked and disable other button

Question

I have in a html page 5 button named 1,2,3,4 and 5.If 3 button are clicked the other button must be disabled.

var clicking=0;
$(document).ready(function(){
 $('button').click(function(){
 clicking++;
 $(this).toggleClass("active");
  if(clicking==3){
   $('button').click(function(){
   $(this).toggleClass("nothing");
   })
  }
 })
})

I tried with this script but it don't work because all the button can be clicked.The if is ignored. i want that only 3 of this 5 button can be clicked and the other must become disabled.

Answer 1

You should do something like this :

var clicking=0;
$(document).ready(function(){
  $('button').click(function(){
    clicking++;
    $(this).toggleClass("active");
    if(clicking==3){
      $('button').each(function(){
        if(!$(this).hasClass("active")){
          $(this).addClass("inactive");
        }
      });
    }
  });
});

I didn't try it, but I think you like for something similar.

Answer 2

Ok i am not a master of jquery but i came up with a simple logic to implement what you want to achieve, that is disabling all the other buttons that haven't been clicked after three clicks. Here's my working code:

var count = 0;
var ids = new Array();
$(document).ready(function(){
 $('button').click(function(){
     ids[count] = this.id;
     count++;    
     if(count == 3){  //three buttons clicked, now time to disable the remaining buttons
         for(var i=0; i<$('button').length; i++){ //we'll check for all buttons
             var id = $('button')[i].id; 
             var flag = true;
             for(var j=0; j<ids.length; j++){ //checking all the buttons against the buttons that got clicked
                 if(id == ids[j])
                     flag = false; //button has been clicked (won't be disabled)              
             }
             if(flag){
                 $("#"+id).attr("disabled", true); //disabling button
             }
         }
     }
 })
})

It's very self explanatory and i added lots of comments but still what i did is:

save the ids of buttons that got clicked, then after three clicks, disabling all the buttons who's ids don't match with the saved ids. Pretty simple.. but im sure you can make the code better as i'm not too good at jquery.

See the Working DEMO here

Answer 3

EDIT: shortened the code

I think this is what you want? Count the number of buttons with .active . If it's three or more, disable all buttons that don't have .active .

JS:

$('button').on('click', function() {
    $(this).toggleClass('active');
    $('button').prop('disabled',false);
    if ($('.active').length >= 3) {
        $('button:not(.active)').prop('disabled',true);
    }
});

Here's a fiddle .

Answer 4

My sugestion is to use an array so you know witch buttons were clicked.

$(document).ready(function(){
    var clickedbuttons = [];
     $('button').click(function(){
         $(this).toggleClass("active");
         var idx = jQuery.inArray($(this).attr("id"), clickedbuttons );
         if(idx == -1)
             clickedbuttons.push($(this).attr("id"));
         else clickedbuttons.splice(idx,1);
         if(clickedbuttons.length == 3) {
                 $('button').each(function() {
                     var index = jQuery.inArray($(this).attr("id"), clickedbuttons );
                     if(index == -1)
                         $(this).attr("disabled", "disabled");
                 });
             }
             else {
                 $('button').each(function() {
                     $(this).removeAttr("disabled");
                 });
            }
     });
})

I'm assuming each button has an id. This will work as you want but you have to have an id in every button.

If you do not want to reenable change accordingly

$(document).ready(function(){
    var clickedbuttons = [];
     $('button').click(function() {
         var idx = jQuery.inArray($(this).attr("id"), clickedbuttons );
         if(idx == -1) {
             clickedbuttons.push($(this).attr("id"));
             $(this).toggleClass("active");
         }
         if(clickedbuttons.length == 3) {
                 $('button').each(function() {
                     var index = jQuery.inArray($(this).attr("id"), clickedbuttons );
                     if(index == -1)
                         $(this).attr("disabled", "disabled");
                 });
             }
             else {
                 $('button').each(function() {
                     $(this).removeAttr("disabled");
                 });
            }
     });
})