最小 - 最大選擇 - 複選框

請你能幫我用我的複選框，因爲我用創建複選框和所有工作的發電機，但我需要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

最小 - 最大選擇 - 複選框

回答

相關問題