checkboxを3つ以上選択させない

Question

チェックボックス を３つ以上選択させないようにするには、どのように書けば良いのでしょうか・・・！

vue.jsを使用しているのでvue使用だとありがたいです。

現在のコードですが、checkboxの機能を持つコンポーネントをimpoortして親コンポーネントで使用しているので、:checked.syncを使用しています。

よろしくお願いします涙

追記
checkboxを表示している部分 ()

<div class="detail-areas">
                    <span>地域を選択してください（最大3つ）</span>
                        <ul class="detail-area-list">
                            <li class="detail-area" v-for="(selectedArea, i) in selectedAreas" :key="i">
                                <ls-check-box-field :text="selectedArea.name" :checked.sync="selectedArea.checked"/>
                            </li>
                        </ul>
 </div>

Comments

[yambejp]

チェックボックスを表示するところまでソースを提示ください
クラスかなにかで制御しますか？
それともページ内のチェックボックスがすべて対象？

ちなみに「３つ以上させない」というのは２つまでという意味ですか？

[yambejp]

selectedAreasの情報もないし再現性がないのでなんとも・・・

Answer 1

チェックボックスの値を変更したときのイベント内で、
・今操作しようとしているチェックボックスが未チェックになるなら、そのまま通す
・今操作しようとしているチェックボックスがチェック済みになるならば、
・今操作しようとしているチェックボックス「以外」のチェックボックスの中で、チェックされている個数を数える
・個数が2以下ならばそのまま通す
・個数が3なら、このイベントをキャンセルする（値を変更させない）
ですかねえ。

UI 的には3つ選択した時点で、チェック済みの選択肢以外を disabled にしておく（2個以下になれば復活）ほうがよいような気もしますが。