Bug using a checkbox or checkboxradio inside an Accordion

Bug using a checkbox or checkboxradio inside an Accordion

Hi

If I put a checkbox or a checkboxradio inside an accordion, the icon for the "tick" goes wrong (as it doesn't display a tick, but another icon that I can't recognise).

This link shows what I mean: http://www.coolgreen.ltd.uk/error/jquery_bug.html

This code should show it:

<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link rel="stylesheet" href=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<h3>First</h3>
<div>
<input type="checkbox" id="coaches" name="filter[]" checked >
<label for="coaches">Coaches</label>
<input type="checkbox" id="volunteers" name="filter[]">
<label for="volunteers">Volunteers</label>
</div>
<h3>Second</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>


<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>

$( "#accordion" ).accordion();

$("input[type='checkbox']").checkboxradio();

</script>
</body>
</html>

Any help as to how to fix this would be appreciated. I've spent the whole day thinking it was my fault, but I'm now pretty sure it isn't.

Thanks