Question: I am using several anchors and when clicking on an anchor, the class switches to **img-swap on**
If I click on another anchor, the class of that anchor switches also on **on**
What I want to achieve: if 1 anchor has already the class on **on**, all other anchors must be blocked to switch on **on**

```
jQuery(document).ready(function ($) {
 $('a.img-swap').click(function () {
  $(this).toggleClass('on');
 }); 
});

```

Is this possible to do a check in javascript when a class is on **on** and if so, block the other anchors to switch from class?

Answer: 
I would just bind handler to be fired only once:

```
jQuery(document).ready(function ($) {
 $('a.img-swap').one('click', function () {
  $(this).toggleClass('on');
 }); 
});

```

Now if you want state `on` to be switchable, i'd use instead:

```
jQuery(document).ready(function ($) {
 $('a.img-swap').click(function () {
  if($('a.img-swap.on').not(this).length) return;
  $(this).toggleClass('on');
 }); 
});

```
Try This -

```js
$(document).ready(function() {
  $("a.img-swap").click(function() {
    $("a.img-swap").each(function() {
      if ($(this).hasClass("on")) $(this).removeClass("on");
    });
    $(this).addClass("on");
  });
});
```

```css
.on {
  background: #ff0000;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a class="img-swap on"> Img1 </a>

<a class="img-swap"> Img1 </a>

<a class="img-swap"> Img1 </a>

<a class="img-swap"> Img1 </a>
```