最小最大選択 - チェックボックス

Question

私はチェックボックスを作成するためにジェネレータを使用していますので、私のチェックボックスで私を助けてください、私はjavacriptでこのチェックボックスを選択してください。私はそれのためにほとんどのものを使用し、何も私はまだすべてを選択することができますが、私は3つから1つだけのチェックが必要です。

スクリプト：

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

Answer 1

あなたは、あなたがしなければならないだけにして選択されるようにONEを必要とする項目のグループを持っている場合チェックボックスではなくラジオタイプを使用してください。それがあなたの問題を処理します。ラジオボタンのデフォルトの動作は、多くの中から1つの選択のみを許可することです。それから、JSも必要ありません。

Answer 2

あなたはこのスニペットを使用することができます

• それは、チェックボックスを識別するためにnameを使用して、複数の
• ページがある場合、それは

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

あなた type=radio影響を与えます