Activate/deactivate unique images (icons) instead of checkboxes

I am trying to replace checkboxes with icons which will change opacity when selected.

Initially, all images should have low opacity. When clicked, the clicked image should change to full opacity. If clicked again, the image should return to low opacity.

In the final version I will add display:none to the input elements so that the actual checkboxes will not display.

What am I doing wrong?

$(".img-checkbox").click(function() {
  var img = $(this);
  if (img.prev().checked) {
    img.css('opacity', '0.3');
  } else {
    img.css('opacity', '1.0');
  }
})

.img-checkbox {
  opacity: 0.3;
  margin-bottom: 5px;
}

<script src="http://ift.tt/1oMJErh"></script>
<div class="form-group">
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="pool">
      <img src="http://ift.tt/1efRQPm" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="pets allowed">
      <img src="http://ift.tt/1efRQPm" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="elevator">
      <img src="http://ift.tt/1efRQPm" class="img-responsive img-checkbox">
    </label>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" name="qRequirements" value="wifi">
      <img src="http://ift.tt/1efRQPm" class="img-responsive img-checkbox">
    </label>
  </div>
</div>