CODEWITHSUNDEEP
javascriptjquery
Mona Coder
Mona Coder

Reputation: 6316

Toggling two classes

Why am I not able to use toggleClass('glyphicon-remove glyphicon-ok') in this snippet?

var Phase;
$(".btn-default").on("click", function(){
 $(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok");

});
label.btn {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}
    span {
      display: block;
      padding: 6px 12px;
    }

    input[type=checkbox] {
      display: none;
    }

    input:checked + span {
      display: block;
      color: #fff;
      background-color: #285e8e;
    }
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
<div class="btn-group">
    <label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label>
    <label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label>
    <label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label>
</div>
  </div>

Upvotes: 1

Views: 33

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

This is because of synthetic* click done on input. In fact, click event is fired twice at label level.

One solution is to filter by event target:

var Phase;
$(".btn-default").on("click", function(e) {
  if (!$(e.target).is('input')) return;
  $(this).find('.glyphicon').toggleClass("glyphicon-remove glyphicon-ok");
});
label.btn {
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}

span {
  display: block;
  padding: 6px 12px;
}

input[type=checkbox] {
  display: none;
}

input:checked+span {
  display: block;
  color: #fff;
  background-color: #285e8e;
}


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="btn-group">
    <label class="btn btn-default"><input name="phase" type="checkbox" value="A"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> A</span></label>
    <label class="btn btn-default"><input name="phase" type="checkbox" value="B"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> B</span></label>
    <label class="btn btn-default"><input name="phase" type="checkbox" value="C"><span><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> C</span></label>
  </div>
</div>

*note: See spec

When a user agent is to run synthetic click activation steps on an element, the user agent must run pre-click activation steps on the element, then fire a click event at the element. The default action of this click event must be to run post-click activation steps on the element. If the event is canceled, the user agent must run canceled activation steps on the element instead.

Upvotes: 1

Related Questions