Why does this JS code work only when "console.log()" is present?

This checkbox routine works only when console.log("message") is included. Remove "console.log()" and it stops working. What's wrong?

Purpose: When the user UNchecks any checkbox with class="one-role", then the checkbox with id="all-roles" should get unchecked.

JQUERY:

// FAILS: This version (without console) does not uncheck "All"
$('.one-role').click(function() {
    if(! $(this).attr('checked'))
     $('#all-roles').prop('checked', false);
});


// WORKS: This version (with console) successfully unchecks "All"
$('.one-role').click(function() {
    if(! $(this).attr('checked'))
     console.log("one-role now unchecked");  // <--- without me, no worky!
     $('#all-roles').prop('checked', false);
}

HTML FORM:

<input type="checkbox" name="include_role[]" value="all" checked="checked" id="all-roles">

<input type="checkbox" name="include_role[]" value="manager" checked="checked" class="one-role">
<input type="checkbox" name="include_role[]" value="owner" checked="checked" class="one-role">

<input type="submit" name="submit" value="Submit">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="http://example.com/assets/jquery.scrollTo.min.js"></script>
<script src="http://example.com/assets/my_javascript.js"></script>

What I've tried:

I'm using Chrome on Windows 10.

My .js file is loaded last.

After changing my js file, I upload to server and hard-refresh (CTRL REFRESH) my browser.

--Puzzled