Min-Max-Auswahl - Kontrollkästchen

Question

Bitte helfen Sie mir mit meiner Checkbox, weil ich Generator für Create Checkbox und alle Arbeit verwendet habe, aber ich brauche configuare min und max für dieses Kontrollkästchen in Javascript auswählen. Ich habe die meiste Sache dafür benutzt und nichts funktioniert, ich kann immer noch alles auswählen, aber ich brauche nur einen Scheck von drei.

Script:

<script type="text/javascript"> 
var limit = 1; 
$('input.css-checkbox + label.css-label').on('change', function (evt) { 
    if ($(this).siblings(':checked').length >= limit) { 
     this.checked = false; 
    } 
}); 
</script> 

HTML

<table style="border-spacing: 5px; border-collapse: separate;"> 
     <tr> 
      <td> 
       <input type="checkbox" name="check_lang" id="check_cz" class="css-checkbox" /> 
       <label for="check_cz" class="css-label"><img src="http://terquil.cz/images/cz.png" class="img-flag" alt="CZ" /></label> 

      </td> 
      <td><h2>CZ</h2></td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="check_lang" id="check_en" class="css-checkbox" /> 
       <label for="check_en" class="css-label"><img src="http://terquil.cz/images/uk.png" class="img-flag" alt="EN" /></label> 

      </td> 
      <td><h2>EN</h2></td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="check_lang" id="check_de" class="css-checkbox" /> 
       <label for="check_de" class="css-label"><img src="http://terquil.cz/images/de.png" class="img-flag" alt="DE" /></label> 
      </td> 
      <td><h2>DE</h2></td> 
     </tr> 
    </table> 

CSS:

input[type=checkbox].css-checkbox { 
     position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; 
} 

input[type=checkbox].css-checkbox + label.css-label { 
    padding-left:37px; 
    height:32px; 
    display:inline-block; 
    line-height:32px; 
    background-repeat:no-repeat; 
    background-position: 0 0; 
    font-size:32px; 
    vertical-align:middle; 
    cursor:pointer; 
} 

input[type=checkbox].css-checkbox:checked + label.css-label { 
    background-position: 0 -32px; 
} 
label.css-label { 
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_c1a4f40d98f1c23d1ad84d2af9c314be.png); 
    -webkit-touch-callout: none; 
-webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 

Wenn Sie eine Meinung haben, wie kann ich es beheben mir so helfen.

Ich versuche auch dieses Skript für meinen Code und es funktioniert auch nicht.

Test Script: (nicht Arbeit)

$("input[name=check_lang]").change(function(){ 
    var max= 1; 
    if($("input[name=check_lang]:checked").length == max){ 
     $("input[name=check_lang]").attr('disabled', 'disabled'); 
     $("input[name=check_lang]:checked").removeAttr('disabled'); 
    }else{ 
     $("input[name=check_lang]").removeAttr('disabled'); 
    } 
}); 

oder diese (nicht Arbeit)

jQuery(function(){ 
    var max = 1; 
    var checkboxes = jQuery('input[type="checkbox"]'); 

    checkboxes.click(function(){ 
     var $this = $(this); 
     var set = checkboxes.filter('[name="'+ this.name +'"]') 
     var current = set.filter(':checked').length; 
     return current <= max; 
    }); 
}); 

Answer 1

Wenn Sie eine Gruppe von Elementen, die ONE erfordern nur sollten Sie dann ausgewählt werden, Verwenden Sie ein Radio-Typ nicht ein Kontrollkästchen. Das wird sich um Ihr Problem kümmern. Das Standardverhalten eines Optionsfelds besteht darin, nur eine Auswahl aus vielen zuzulassen. Dann brauchst du nicht einmal dein JS.

Answer 2

Sie diese Schnipsel verwenden können:

• nutzt name die Kontrollkästchen, um festzustellen, ob es auf der Seite mehrere sind
• es gibt Ihnen die type=radio Wirkung

$("input:checkbox").on('click', function() { 
 
    var $checkbox = $(this); 
 
    if ($checkbox.is(":checked")) { 
 
    var more = "input:checkbox[name='" + $checkbox.attr("name") + "']"; 
 
    $(more).prop("checked", false); 
 
    $checkbox.prop("checked", true); 
 
    } else { 
 
    $checkbox.prop("checked", false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p>Checkboxes with Radio-Effect</p> 
 
    <label> 
 
    <input type="checkbox" name="checkbox" />Check 1</label> 
 
    <label> 
 
    <input type="checkbox" name="checkbox" />Check 2</label> 
 
    <label> 
 
    <input type="checkbox" name="checkbox" />Check 3</label> 
 
</div>