javascript - 复选框检查事件未被阻止

Question

我有一组复选框，我想限制其最多检查一个。如果需要更改选择，则需要取消选中第一个选中的选项，但最大限制必须为 1。这是 jquery 代码。

 $('#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);
 })
 );

在这里，上面的代码限制只检查一个复选框，但是当我尝试检查其他复选框时，它们首先被选中，然后取消选中。我哪里做错了？

这是动态创建的 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);

Answer 1

试试这个:取消选中除单击事件处理程序中单击的一个之外的所有其他复选框，如下所示

$('#ReportRow').on('click', 'input[type="checkbox"]',function(){
  $('#ReportRow input[type="checkbox"]').not(this).prop("checked",false);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReportRow">
<input type="checkbox">one
  <input type="checkbox">Two
  <input type="checkbox">Three
  <input type="checkbox">Four
</div>