「マルチセレクトで選択できる数を制限したい！」とリクエストボードより投稿をいただきました。
要望にお応えして、”マルチセレクトで選択できる数を制限する強化ガジェット”を作ってみました！
ビジュアル設定に対応していますので、制限を入れたいと思っている方は、ぜひ参考にしてください。
変更・改定履歴
-
改定
マルチセレクトの設定値をname値からフィールドIDに変更
-
改定
コメントアウトの文章を修正
-
改定
ver.2.20アップデートに伴い注意事項を追記
前提
ブロックの JavaScript タブに入れて設定値を変更することで使用できます。
制限方法を、2つ用意しています。
1. 制限数を超えてチェックをした場合、アラートによるエラーメッセージを表示する
2. 制限数をチェック時点で、それ以上の選択を不可とする
※ 選択不可の場合、「ヘルプテキスト」に注意文言などの記載をお願いします
マルチセレクトは、チェックボックスのみに対応しており、
セレクト等のデザインに変更された場合、動作しない可能性があります。ご注意ください。
マルチセレクトが1つの場合
「checkBoxName」「selectNum」「selectNumOver」の3つの値を設定いただけます。
| checkBoxName | マルチセレクトのフィールドIDを設定します。 フィールドIDが10の場合、「10」を '' の間に設定します。 |
|---|---|
| selectNum | 上限数を設定します。 数字は半角数字で設定し、こちらは '' の記載は不要です。 |
| selectNumOver | アラートによるエラーメッセージを表示する場合に設定します。 選択不可の処理とする場合は、こちらの設定は不要です。 エラーメッセージに関しては、"" の間に設定します |
// 設定値
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. エラーメッセージを出さない場合、「''」で設定する個数をそろえる
// 設定値
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の都合上、ラグが出てしまう可能性があるのでご了承ください。
また、不具合やほかのやり方がある等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。
