Kontrollkästchen Check-Ereignis wird nicht verhindert

Question

Ich habe eine Reihe von Kontrollkästchen, auf die ich beschränken möchte, um maximal eins zu überprüfen. Wenn die Auswahl geändert werden muss, müssen zuerst die aktivierten Optionen deaktiviert werden, aber das maximale Limit muss eins sein. Hier ist der 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); 
}) 
); 

Hier wird der obige Code ist nur eine Checkbox Beschränkung geprüft werden, aber wenn ich andere zu überprüfen, ich versuche, sie zuerst überprüft werden, und dann unkontrolliert. Wo mache ich mich falsch?

Hier ist das dynamisch erstellte 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

Versuchen Sie folgendes: deaktivieren Sie alle anderen Kontrollkästchen mit Ausnahme geklickt haben eine innerhalb Click-Ereignishandler, wie unten

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

Diese Zeile:

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

sagt Sie das Kontrollkästchen deaktivieren möchten. Es macht genau das, was Sie ihm sagen. Nur ein Kommentar: Benutzer können verwirrt sein, da Checkboxen mehrere Auswahlen prüfen sollen. Optionsfelder sind so gestaltet, dass nur eine Option ausgewählt werden kann.

Answer 3

Sie von der Funktion false zurückgeben, wenn ein Kontrollkästchen ist bereits ausgewählt, die verhindert die Auswahl des Kontrollkästchens.

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

Tun Sie etwas wie folgt aus:

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