Clicked on single div of main div container, other divs of main container needs to dont work click event on them.(Jquery) -

i have 12 divs in main div container.they have different ids respectively.each div has 6 buttons. when 1st div button being clicked dont allow click on other div's button untill count equals 6. when count equal 6 next div available click.

is there solution in jquery? have tried out didn't how that.

thanking in advance.

this question highly vague i'm guessing here, want add handler clicks main div itself.

so main div has id main , assuming structure this:

<div id="main">    <div>      <button>a</button>      <button>b</button>      <!-- ...more buttons -->    </div>    <div>      <button>a</button>      <!-- ...more buttons<-->    </div>    <!-- ...more divs -->  </div> 

you handle click events bubble main, like:

$("#main").on("click", function (e) {   var data = $(this).data("currentdiv")     , btndiv = $(e.target).parent();    // if no data, first click, prepare   // current div data stored   if (!data) {     data = {el: btndiv, clicks: 1};     $(btndiv).siblings()       .find("button").attr("disabled", "disabled");   }     // if there *is* data , parent of clicked   // button not current div, return early.   else if (!btndiv.is(data.el)) {     return;   }    // if 6th click, clear current div ,    // restore functionality of buttons       else if (5 === data.clicks) {     $("button", this).removeattr("disabled");     data = null;   }    // finally, increment click count if we're between   // 1 , 5 clicks div   else { data.clicks++; }    $(this).data("currentdiv", data); }) 

http://jsfiddle.net/jjyw7/1/