Checkboxes not clearing visually [duplicate]

I'm trying to clear some checkboxes using a button that calls a function to reset them (see snippets from jsfiddle below).

Visually, the forms are not 'unchecked', but they need to be clicked twice to change the valie again - which made me think it's just a display issue. So I tested in jsfiddle here and I can see the before and after results of running the reloadForm function - the checkboxes are 'unchecked' (the value of checked is false), but they 'look' checked.

I've tried a few variations of unchecking the boxes, but they all get the same result.

Pretty certain this is a specific jquery issue - the code snippets below work fine here, but in jsfiddle (or my actual app) they don't.

function reloadForm(clear) {
  //clear the form
  $('#descriptionTxt').val('');
  $("input[type='checkbox']").prop('checked', false);
}

<link href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reloadBtn" style="padding:20px">
  <button onclick="reloadForm(true)">Reset Form</button>
</div>
<fieldset id="checkRowstudents1" class="ui-grid-a">
  <div id="checkRowstudents1-a" class="ui-block-a">
    <label for="learnerstudents0">ari</label>
    <input type="checkbox" name="learner" id="learnerstudents0" value="ari" data-mini="true" >
  </div>
  <div id="checkRowstudents1-b" class="ui-block-b">
    <label for="learnerstudents1">dominic</label>
    <input type="checkbox" name="learner" id="learnerstudents1" value="dominic" data-mini="true">
  </div>
</fieldset>

<label for="descriptionTxt" class="ui-hidden-accessible">Description:</label>
<input type="text" name="descriptionTxt" id="descriptionTxt" placeholder="Description" value="">