jquery checkbox prop not working

I'm trying to check/uncheck a checkbox using jquery 1.12.

this is my code:

<input type="checkbox" name="agreement" id="checkbox-3"/>
<button id="btn-agree">I Agree</button>
<button id="btn-notagree">Cancel</button>

<script>
$(document).ready(function() {
  $('#btn-agree').click(function() {
    $('#checkbox-3').prop('checked', true);
  });
  $('#btn-agree').click(function() {
    $('#checkbox-3').prop('checked', false);
  });
});

when I click the btn-agree, the function doesn't return any errors, but the checkbox is not checked. console.log($('#checkbox-3').prop('checked'); show true

can anyone point out what's wrong in my code?