JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
  <div data-toggle="buttons" style="margin-top:-3px">
    <label name="lbl" class="btn" for="chkbx" style="padding:0px 0px 0px 0px; margin:0px 0px 0px 0px">
      <input type="checkbox" autocomplete="off" name="chkbx" id="chk" />
      <i class="btn fa fa-plus-square-o" aria-hidden="true">
         <img src="https://s8.postimg.org/4b0c6h06t/moderator-red.gif"></i></label>
  </div>
</form>

JavaScript

$(function() {
  $("[name='lbl']").change(function() {
    alert("It's firing at least.");
    if ($(this).is(':checked')) {
      $(this).next().attr('class', 'btn fa fa-check-square-o');
      $(this).next().find('img').attr('src', 'https://s5.postimg.org/4k34ikv5z/moderator-blue.gif');
    } else {
      $(this).next().attr('class', 'btn fa fa-plus-square-o');
      $(this).next().find('img').attr('src', 'https://s8.postimg.org/4b0c6h06t/moderator-red.gif');
    }
  });
});