체크 박스 체크 이벤트가 방지되지 않습니다.

Question

최대 하나까지 체크하도록 제한하려는 체크 박스 세트가 있습니다. 선택 사항을 변경해야하는 경우 먼저 확인 된 항목을 선택 취소해야하지만 최대 한도는 하나 여야합니다. 다음은 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

이 시도 : 이미 선택 체크 박스,이 때 함수에서 false를 반환하는 아래

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

처럼 클릭 이벤트 핸들러 내부를 클릭 제외한 다른 모든 확인란의 선택을 취소하는 확인란을 선택하지 못했습니다.

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