JavaScriptによるcheckboxの個数制限について

Question

下記のHTMLで書いたチェックボックスの選択可能個数の上限を3こにするためのコードをjavaascriptで書いたのですが、機能しません。解決策をご存知の方いらっしゃいましたら教えていただきたいです。

function click_cb(){
    //チェックカウント用変数
    var check_count = 0;
 
    // 箇所チェック数カウント
    $(".group input").each(function(){
        var parent_checkbox = $(this).children(".group input");
 
        if(parent_checkbox.prop('checked')){
            check_count = check_count+1;
        }
    });
 
    // 0個のとき（チェックがすべて外れたとき）
    
    // 3個以上の時（チェック可能上限数）
    if(check_count > 2){
        $(".group input").each(function(){
            // チェックされていないチェックボックスをロックする
            if(!$(this).children(".group input").prop('checked')){
                $(this).children(".group input").prop('disabled',true);
                $(this).addClass("locked");
            }
        });
    }else{
        $("..group input").each(function(){
            // チェックされていないチェックボックスを選択可能にする
            if(!$(this).children(".group input").prop('checked')){
                $(this).children(".group input").prop('disabled',false);
                $(this).removeClass("locked");
            }
        });
    }
 
    return false;
}
       

<div class= "group3">
    <table border="" width="840px" height="700">
        <tr><th colspan=6 height="10%">グループⅢ</th></tr>
        <tr width="16%" height="10%">
            <th>A難度</th><th>B難度</th><th>C難度</th><th>
            D難度</th><th>E難度</th><th>F難度</th>
        </tr>
        <tr align="center">
            <td>
                <label><input type="checkbox" class="G3" value="0.1" 　onclick = "click_cb();">前宙</label>
            </td>
            <td>
                <label><input type="checkbox" class="G3" value="0.2" onclick = "click_cb();">前宙</label>
            </td>
            <td>
                <label><input type="checkbox" class="G3" value="0.3" onclick = "click_cb();">前宙</label>
            </td>
            <td>
                <label><input type="checkbox" class="G3" value="0.4" onclick = "click_cb();">前宙</label>
            </td>
            <td>
                <label><input type="checkbox" class="G3" value="0.5" onclick = "click_cb();">前宙</label>
            </td>
            <td>
                <label><input type="checkbox" class="G3" value="0.6" onclick = "click_cb();">前宙</label>
            </td>
        </tr>
           <tr>
             <td colspan="6" align="center">
               合計点：<span id="total_3">0</span>点
           </td>
        </tr>
    </table>
</div>

Comments

[x_x]

HTML には class="group" がないのですが、どこにあるのでしょうか？

Answer 1

        $(".group input").each(function(){
            // チェックされていないチェックボックスをロックする
            if(!$(this).children(".group input").prop('checked')){
                $(this).children(".group input").prop('disabled',true);
                $(this).addClass("locked");
            }
        });

このeachの中では、thisは1つ1つのチェックボックスになります。なので、$(this).children(".group input")と取るのではなく（inputの子要素はないので何も取れません）、単に$(this)とするのが適当ではないかと思います。

Comments

[kuuuuuya]

ご協力いただき誠にありがとうございます。ご指摘いただいた通り、下記のように$(this).children(".group input")を$(this)に変更してみたのですが個数制限がまだかかりませんでした。他に考えられる原因はありますでしょうか？

function click_cb(){
//チェックカウント用変数
var check_count = 0;

// 箇所チェック数カウント
$(".group input").each(function(){
var parent_checkbox = $(this);

if(parent_checkbox.prop('checked')){
check_count = check_count+1;
}
});

// 0個のとき（チェックがすべて外れたとき）

// 3個以上の時（チェック可能上限数）
if(check_count > 2){
$(".group input").each(function(){
// チェックされていないチェックボックスをロックする
if(!$(this).prop('checked')){
$(this).prop('disabled',true);
$(this).addClass("locked");
}
});
}else{
$(".group input").each(function(){
// チェックされていないチェックボックスを選択可能にする
if(!$(this).prop('checked')){
$(this).prop('disabled',false);
$(this).removeClass("locked");
}
});
}

return false;
}

Answer 2

上限まで達したらdisabledを設定すればよいでしょう

<script>
var max_checked=3;
$(function(){
  $('.group :checkbox').on('change',function(){
    var flg=$(this).closest('.group').find(':checkbox:checked').length>=max_checked;
    $(this).closest('.group').find(':checkbox:not(:checked)').prop('disabled',flg);
  });
});
</script>

</script>
<div class= "group">
<label><input type="checkbox" value="1" >1</label>
<label><input type="checkbox" value="2" >2</label>
<label><input type="checkbox" value="3" >3</label>
<label><input type="checkbox" value="4" >4</label>
<label><input type="checkbox" value="5" >5</label>
<label><input type="checkbox" value="6" >6</label>
</div>                                   
<div class= "group">                     
<label><input type="checkbox" value="1" >1</label>
<label><input type="checkbox" value="2" >2</label>
<label><input type="checkbox" value="3" >3</label>
<label><input type="checkbox" value="4" >4</label>
<label><input type="checkbox" value="5" >5</label>
<label><input type="checkbox" value="6" >6</label>
</div>