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>

Answer 2

这一行：

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

表示您要取消选中该复选框。它完全按照你的要求去做。只是评论：用户可能会感到困惑，因为复选框旨在检查多个选项。单选按钮的设计只能选择一个选项。

Answer 3

如果已经选中了复选框，则您将从该函数返回false，这会阻止选中复选框。

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

做这样的事情：

$('#ReportRow').on('click', 'input[type="checkbox"]', (function (event) {
     alert("Hi");
     var curCheckBox = this;
     $('#ReportRow').find('input[type="checkbox"]').each(function()  {
        if(this === curCheckBox)
            $(this).attr("checked",true);
        else
            $(this).attr("checked",false);
    });
    alert(checkedReportValues);
});

未阻止复选框检查事件

3 个答案: