で囲んで出力します
const groupContainer = document.querySelector(`[data-id="${id}"]`);
if (!groupContainer) return;
// 初期化および変更時の制限処理
const checkboxes = groupContainer.querySelectorAll('input[type="checkbox"]');
groupContainer.addEventListener('change', function() {
const checkedCount = groupContainer.querySelectorAll('input[type="checkbox"]:checked').length;
if (checkedCount >= 2) {
// 2個チェックされたら、未チェックの項目を非活性化
checkboxes.forEach(cb => {
if (!cb.checked) {
cb.disabled = true;
}
});
errorMsg.style.display = 'none'; // 2個選ばれたのでエラーを消す
} else {
// 2個未満ならすべて活性化
checkboxes.forEach(cb => {
cb.disabled = false;
});
}
});
});
// 2. 送信ボタンが押されたとき、「現在表示されている期」でちょうど2日間選択されているか確認
if (form) {
form.addEventListener('submit', function(e) {
// 現在表示されている日程グループを特定する
// Conditional Fieldsで非表示のグループには .wpcf7cf-hidden クラスが付与されるか、display: none になります
let activeGroup = null;
for (const id of groupIds) {
const container = document.querySelector(`[data-id="${id}"]`);
if (container && !container.classList.contains('wpcf7cf-hidden') && container.style.display !== 'none') {
activeGroup = container;
break;
}
}
// 何かしらの期が表示されている場合のみバリデーションチェック
if (activeGroup) {
const checkedCount = activeGroup.querySelectorAll('input[type="checkbox"]:checked').length;
if (checkedCount !== 2) {
// 2個選択されていなければ送信処理を中断
e.preventDefault();
e.stopPropagation();
errorMsg.style.display = 'block';
// エラー表示のある場所にスムーズスクロール
activeGroup.scrollIntoView({ behavior: 'smooth', block: 'center' });
// WPcf7標準のローディングアニメーションやボタン無効化をリセット
const submitBtn = form.querySelector('.wpcf7-submit');
if (submitBtn) {
submitBtn.removeAttribute('disabled');
}
const spinner = form.querySelector('.wpcf7-spinner');
if (spinner) {
spinner.classList.remove('is-active');
}
return false;
}
}
});
}
});