Checkbox check event is not getting prevented

I have a set of set of checkboxes on which I want to restrict to check maximum of one. If the choice needs to be changed then first checked ones need to be unchecked but maximum limit needs to be one. Here is the jquery code.

 $('#ReportRow').on('click', 'input[type="checkbox"]', (function (event) {
 alert("Hi");
 var checkedReportValues = $('#ReportRow input:checkbox:checked').map(function () {
           return this.value;
           }).get();

           if ($("#ReportRow input:checkbox:checked").length > 1) {
                    return false;
           }
           alert(checkedReportValues);
 })
 );

Here, the above code is restricting only one checkbox to be checked but when I am trying to check other, they first are being checked and then unchecked. Where I am doing wrong ?

Here is the dynamically created HTML.

 //Add Code to Create CheckBox dynamically by accessing data from Ajax for the application selected above
            var Reports = " User, Admin, Detail, Summary";
            var arrReportscheckBoxItems = Reports.split(',');
            var reportscheckBoxhtml = ''
            for (var i = 0; i < arrReportscheckBoxItems.length; i++) {
                reportscheckBoxhtml += '&nbsp;&nbsp;&nbsp;&nbsp;<label style="font-weight: 600; color: #00467f !important;"><input type="checkbox" value=' + arrReportscheckBoxItems[i] + '>' + arrReportscheckBoxItems[i] + '</label>';
            }

            //Add Submit button here
            reportscheckBoxhtml += '&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="SubmitReport" class="btn btn-primary">Submit</button>';

            $('#ReportRow').html(reportscheckBoxhtml);