JSチェックボックスグループ選択個数制限

1.1問題説明

実際運用する時、チェックボックスグループの選択可能な個数を制限する場合があります。下記のよう（最大2個選択可能）：

1.2実現方法

Javascriptで現在選択された値を取得し、length属性で長さを判断して処理を行う。

2.1 テンプレート作成

テンプレートを新規作成、パラメータパネルに「チェックボックスグループ」ウィジェットを追加、「データ辞書」を「1,2,3,4,5」に設定します。下記のよう：

2.2 JavaScriptイベントを追加

すべての値をリセットと超過部分のみをリセットのJavascriptは別々です。

2.2.1 すべての値をリセット

チェックボックスグループウィジェットに「状態変更」イベントを追加：

Javascript文

//ウィジェット値を取得
var value = this.getValue();
//下記のJavascript文と同じ効果です
//var widget = this.options.form.getWidgetByName("checkBoxGroup0");
//var value = widget.getValue()
if (value.length > 2) {
	//長さを判断する
	alert("最大の個数2を超えました！");
	this.reset();
	//全ての値をリセット
}

2.2.2 超過部分をリセット

ラベルウィジェットを一つ追加し、チェックボックスグループの元の値を保存用：

チェックボックスグループウィジェットに「状態変更」イベントを追加

Javascript文

//元の値を取得
var w_label0 = this.options.form.getWidgetByName("label0");
var v_label0 = w_label0.getValue();
//ウィジェット値を取得
var value = this.getValue();
//下記のJavascript文と同じ効果です
//var widget = this.options.form.getWidgetByName("checkBoxGroup0");
//var value = widget.getValue();
if (value.length > 2) {
	//長さを判断する
	alert("最大の個数2を超えました！");
	//超過部分をリセット
	this.setValue(v_label0);
}

2.3 効果確認

2.3.1 すべての値をリセット

2.3.2 超過部分をリセット

JSチェックボックスグループ選択個数制限-超過部分リセット.cpt

JSチェックボックスグループ選択個数制限-全てリセット.cpt