Checkbox doesn't work, but the label does

I have a label and a checkbox. When I click the label the desired action occurs. The checkbox does nothing, neither when I click to enable or disable. I have moved the label both inside and outside of the input and nothing seems to work. All code is below.

home_filters.html.erb:

<div id="test-content" class="hide">
  <div class="container-fluid">
    <label id="label-sentence-fee" class="general-text-label" for="sentence-fee"><input type="checkbox" name="label-sentence-fee" id="sentence-fee"> No Fee Listing</label><br>
    <label id="label-sentence-transit" class="general-text-label" for="sentence-transit"><input type="checkbox" name="label-sentence-transit" id="sentence-transit"> Transit</label><br>
    <label id="label-sentence-pets" class="general-text-label" for="sentence-pets"><input type="checkbox" name="label-sentence-pets" id="sentence-pets"> Pets</label><br>
  </div>
</div>

.js file:

$("#sentence-fee").click(function(feeEvent){
  feeEvent.stopPropagation();
  $("#listing-search-sentence-fee").toggle();
  $("input#sentence-fee").prop('checked', true);
});

$("#sentence-transit").click(function(transitEvent){
  transitEvent.stopPropagation();
  $("#listing-search-sentence-transit").toggle();
  $("input#sentence-transit").prop('checked', true);
});

$("#sentence-pets").click(function(petsEvent){
  petsEvent.stopPropagation();
  $("#listing-search-sentence-pets").toggle();
  $("input#sentence-pets").prop('checked', true);
});