開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2022年2月22日 (火)

マルチセレクトで選択できる数を制御する強化ガジェット

「マルチセレクトで選択できる数を制限したい!」とリクエストボードより投稿をいただきました。
要望にお応えして、”マルチセレクトで選択できる数を制限する強化ガジェット”を作ってみました!
ビジュアル設定に対応していますので、制限入れたいと思っている方は、ぜひ参考にしてください。

変更・改定履歴

  • 改定

    マルチセレクトの設定値をname値からフィールドIDに変更

  • 改定

    コメントアウトの文章を修正

前提

ブロックの JavaScript タブに入れて設定値を変更することで使用できます。
制限方法を、2つ用意しています。
1. 制限数を超えてチェックをした場合、アラートによるエラーメッセージを表示する
2. 制限数をチェック時点で、それ以上の選択を不可とする
 ※ 選択不可の場合、「ヘルプテキスト」に注意文言などの記載をお願いします
マルチセレクトは、チェックボックスのみに対応しており、
セレクト等のデザインに変更された場合、動作しない可能性があります。ご注意ください。

マルチセレクトが1つの場合

「checkBoxName」「selectNum」「selectNumOver」の3つの値を設定いただます。

checkBoxName マルチセレクトのフィールドIDを設定します。
フィールドIDが10の場合、「10」を '' の間に設定します。
selectNum 上限数を設定します。
数字は半角数字で設定し、こちらは '' の記載は不要です。
selectNumOver アラートによるエラーメッセージを表示する場合に設定します。
選択不可の処理とする場合は、こちらの設定は不要です。
エラーメッセージに関しては、"" の間に設定します

JavaScript
// 設定値
const checkBoxName = "f0" + "";  // 選択数制限を行いたい項目のフィールドID
const selectNum = 3; // 選択可能数(半角数字)
// エラーメッセージがある場合、アラートによるエラーメッセージが表示されます
// エラーメッセージがない場合、個数以上の選択が不可となります(エラーメッセージは表示されません)
const selectNumOver = "エラーメッセージ";

// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function () {
    checkBoxSetting();
};

// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加
const list = document.getElementsByName(checkBoxName);
function checkBoxSetting() {
    let count = 0;
    let flg = [];
    if(0 < list.length){
        for (var i = 0; i < list.length; i++) {
            var element = list[i];
            element.setAttribute('onchange', 'selectNumCheck('+ i +')');
            flg[i] = false;
            if (element.checked) {
                flg[i]= true;
                count++;
            }
        }
        if(selectNum <= count && !selectNumOver) {
            for (var i=0; i<list.length; i++){
                if(flg[i] == true){
                    list[i].disabled =false;
                }else{
                    list[i].disabled = true;
                }
            }
        }
    }
    
}
// チェックボックスにチェックできる数を制限する
function selectNumCheck(num){
    let count = 0;
    let flg = [];
    for (var i = 0; i < list.length; i++) {
        flg[i] = false;
        if (list[i].checked) {
            flg[i]= true;
            count++;
        }
    }
    if(selectNumOver){
        if(selectNum < count) {
            alert(selectNumOver);
            list[num].checked = false;
            return false;
        }
    }else{
        if(selectNum <= count) {
            for (var i=0; i<list.length; i++){
                if(flg[i] == true){
                    list[i].disabled =false;
                }else{
                    list[i].disabled = true;
                }
            }
        }else{
                for (var i=0; i<list.length; i++){
                    list[i].disabled = false;
                }
        }
    }
    
}

マルチセレクトが複数の場合

複数個のマルチセレクトを設定できるように設計してあり、
1つの場合と同様に「checkBoxName」「selectNum」「selectNumOver」の3つの値を設定いただけます。
[] 内の値を「,」区切りで制限が必要な数だけ設定する仕組みとなっています。

使用する際に下記を注意してください。
1. 「,」区切りで設定する項目の順番をそろえる
2. 設定する値の数をそろえる
3. エラーメッセージを出さない場合、「''」で設定する個数をそろえる

JavaScript
// 設定値
const checkBoxName = ['','']; // 選択数制限を行いたい項目のname値
const selectNum = [1,2]; // 選択可能数(半角数字)
// エラーメッセージがある場合、アラートによるエラーメッセージが表示されます
// エラーメッセージがない場合、個数以上の選択が不可となります(エラーメッセージは表示されません)
const selectNumOver = ['エラーメッセージ',''];

// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function () {
    checkBoxSetting();
};

// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加

function checkBoxSetting() {
    let count = 0;
    let flg = [];
    let list = [];
    for (var checkBoxNum = 0; checkBoxNum < checkBoxName.length; checkBoxNum++) {
        list[checkBoxNum] = document.getElementsByName(checkBoxName[checkBoxNum]);
        for (var i = 0; i < list[checkBoxNum].length; i++) {
            var element = list[checkBoxNum][i];
            element.setAttribute('onchange', 'selectNumCheck('+ checkBoxNum +','+ i +')');
            flg[i] = false;
            if (element.checked) {
                flg[i]= true;
                count++;
            }
        }
        if(selectNum[checkBoxNum] <= count && !selectNumOver[checkBoxNum]) {
            for (var i=0; i<list[checkBoxNum].length; i++){
                if(flg[i] == true){
                    list[checkBoxNum][i].disabled =false;
                }else{
                    list[checkBoxNum][i].disabled = true;
                }
            }
        }
    }
    
}
// チェックボックスにチェックできる数を制限する
function selectNumCheck(checkBoxList,val){
    let list = document.getElementsByName(checkBoxName[checkBoxList]);
    let count = 0;
    let flg = [];
    for (var i = 0; i < list.length; i++) {
        flg[i] = false;
        if (list[i].checked) {
            flg[i]= true;
            count++;
        }
    }
    if(selectNumOver[checkBoxList]){
        if(selectNum[checkBoxList] < count) {
            alert(selectNumOver[checkBoxList]);
            list[val].checked = false;
            return false;
        }
    }else{
        if(selectNum[checkBoxList] <= count) {
            for (var i=0; i<list.length; i++){
                if(flg[i] == true){
                    list[i].disabled =false;
                }else{
                    list[i].disabled = true;
                }
            }
        }else{
                for (var i=0; i<list.length; i++){
                    list[i].disabled = false;
                }
        }
    }
    
}

JQuery を使えばもう少し楽に設定できますが、今回は JavaScript のみで作成しています。
複数の項目や選択肢が多い場合、JavaScriptの都合上、ラグが出てしまう可能性があるのでご了承ください。
また、不具合やほかのやり方がある等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

解決しない場合はこちら コンテンツに関しての
要望はこちら