CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Guillermorivia
Guillermorivia

Reputation: 25

Disable OnClick Event Until Another One Is Triggered First

I have 6 divs (.selector) set to do (onclick):

  1. Show all tables
  2. Show Nº1, Hide rest
  3. Show Nº2, Hide rest
  4. ...
  5. Show Nº5, Hide rest

They also toggle a class "activated" that changes the background color.

What I'm trying to do is that once I click on "Show Nº1, Hide rest" disable the click option (On this div) until I click in another one first like "Show all tables" or "Show Nº2, Hide rest".

Something like the "once function" but that resets as soon as another div is activated. Any way to do this?

enter image description here

Here is my CSS

.selector {
  height: 25px;
  width: 25px;
  background-color: #702C3D;
  margin-left: 2px;
  margin-right: 2px;
  float: left;
  cursor: pointer;
}

.selector.activated {
  background-color: #000000;
}

Here is my JavaScript

$('.selector').on('click', function(event) {
  $('.selector').not(this).removeClass('activated');
  $(this).toggleClass('activated');
});

Upvotes: 2

Views: 398

Answers (3)

Ismail RBOUH
Ismail RBOUH

Reputation: 10470

If you change toggleClass to addClass in your click function. Then, more than 1 click in your .activated will have no effect (as the click is disabled):

$('.selector').on('click', function(event) {
  $('.selector').not(this).removeClass('activated');
  $(this).addClass('activated');
});

Or you can check if the clicked .selector has .activated class like:

$('.selector').on('click', function(event) {
  if($(this).is('.activated')) return;
  $('.selector').not(this).removeClass('activated');
  $(this).toggleClass('activated');
});

Upvotes: 1

Jacques Marais
Jacques Marais

Reputation: 2756

There's two things to do:

  1. Wrap the JavaScript inside a function
  2. Unbind the click event everytime you click on something

Here's how:

function clickEvent(elements){
  elements.bind('click', function(event) {
    $('.selector').not(this).removeClass('activated');
    $(this).toggleClass('activated');
    $('.selector').unbind('click');
    clickEvent($('.selector').not(this));
  });
}
clickEvent($('.selector'));
.selector {
   height: 25px;
   width: 25px;

   background-color: #702C3D;
   color: #FFF; //for display purposes

   margin-left: 2px;
   margin-right: 2px;

   float: left;

   cursor: pointer;
}

.selector.activated {
   background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="selector">1</div><div class="selector">2</div><div class="selector">3</div><div class="selector">4</div><div class="selector">5</div><div class="selector">6</div>

Upvotes: 1

devzero
devzero

Reputation: 2680

You should be able to do

if($(this).hasClass('activated'))
    return;

To skip it if this was allready activated.

Upvotes: 0

Related Questions