JSのswitch内のクリックイベントが多重する

// sample.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="" content="">
    <link rel="stylesheet" media="screen" href="">
    <link rel="stylesheet" media="screen" href="">
    <title>グラフのレパートリーの確認</title>
    <script src="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="check_parts">
        <ul class="check_buttons">
            <li>
                <label>
                    <input type="checkbox" value="1" name="check" class="check_button" checked>
                    value:1
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="2" name="check" class="check_button">
                    value:2
                </label>
            </li>
        </ul>
        <button class="multi_btn">ボタン</button>
    </div>
      <script src="sample4.js"></script>
  </body>
</html>

// sample.js
function cal_sum(object){
    var sum=0;
    for (var i= 0; i<object.length; i++){
        sum+=object[i];
    }
    return sum;
}

$('[name="check"]').change(function(){
    var len= $('[name="check"]:checked').length;
    let check_index= [];
    // 最低一つはチェックがついている状態を維持する
    if (len == 1){
        $('[name="check"]:checked').attr('disabled','disabled');
    }else{
        $('[name="check"]:checked').removeAttr('disabled');
    }
    $('[name="check"]:checked').each(function(index,element){
        check_index.push(Number($(element).val()));
    });
    sum= cal_sum(check_index);
    switch(sum){
        // sumの値が１→３→(1 or 2)→３→ボタン,で予想外の挙動
        case 1:
            alert('sum' + sum);
            break;
        case 2:
            alert('sum' + sum);
            break;
        case 3:
            alert('sum' + sum);
            // ボタンのクリックイベント
            $('.multi_btn').on('click',function(){
                alert('イベントが多重する');
            })
            break;
        default:
            alert('Error');
            break;
    }
});

チェックボックスが二つ（value='1'とvalue='2'）あり、二つのうち一つは必ずチェックが付いた状態を維持し、デフォルトではvalue='1'の物だけにチェックが付いた状態です。ここからvalue='2'の方にもチェックし（１回目の二つともチェックが付いた状態）、そこからまたvalue='2'の方のチェックを外し（value='1'のみチェックが付いた状態）、最後にvalue='2'の方のチェックをつける（２回目の二つともチェックが付いた状態）。そしてボタンを押すと、alertの'イベントが多重する'が二回表示されます。
同様にして、一回もボタンを押さずに二つともチェックが付いた状態をn回完遂した後、最後にボタンを押すと、'イベントが多重する'のalert警告文がn回表示されます。

自分はこのn回表示されるのを一度のみ、'イベントが多重する'の表示を一回のみにするのが目的です。これはswitch構文の仕様なのでしょうか。swicthではなく、if文などを組み合わせた方が良いのでしょうか？助言をお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

changeなど複数回起きるイベントの中でイベントの登録すると多重に登録されます。
変数を用意して、swicth内のイベント登録はchangeイベントに登録する関数外で行い、変数の状況を見て処理を変えるようにしてみてください。

js
1var flag = false;
2$('[name="check"]').change(function(){
3  flag = true;
4});
5$('.multi_btn').on('click',function(){
6  if ( flag ) {
7    // ここで処理
8  }
9});