最小 - 最大选择 - 复选框

请你能帮我用我的复选框，因为我用创建复选框和所有工作的发电机，但我需要configuare min和max选择此复选框在JavaScript中。我用了大多数东西，没有任何工作，我仍然可以选择所有，但我只需要从三个检查。最小 - 最大选择 - 复选框

脚本：

<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; 
}

如果您有任何意见如何解决它，以便帮助我。

我也试着为我的代码使用这个脚本，它也不起作用。

测试脚本：（不工作）

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

或本（不工作）

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; 
    }); 
});

来源

2017-04-11 Radek Tarant

为什么这个标签与C＃一起吗？ –

我的坏sry我删除了C＃标记。 –

不用担心队友，小心标记。 –

如果你有一组要求一个项目来，才可以选择，那么你应该使用无线电类型而不是复选框。这会照顾你的问题。单选按钮的默认行为是只允许从多个选项中选择一个。那么你甚至不需要你的JS。

来源

2017-04-11 17:47:15 Adrianopolis

thx，它的真实。我忘了我可以使用简单的方法来单选按钮。 –

你可以使用这个片段：

它采用name如果有多个页面
它给你的type=radio影响到识别的复选框

$("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>

来源

2017-04-11 17:57:16 Felix

最小 - 最大选择 - 复选框

回答

相关问题