Shopify网站如何限制Propel预约插件的复选框最大选择数？

问题说明 #

我首次使用Shopify，通过Propel Appointment Booking插件添加了自定义复选框问题“您想添加哪些活动？”，该问题会在选择服务日期/时间后显示。现有11个复选框，需要限制用户最多选择4个，超出时弹出提示。目前无法为输入框添加特定ID或类，当前使用的代码仅能处理单个复选框：

window.onload = function () {
    const input = document.querySelector('input[type=checkbox]');
    function check() {
        if (input.checked) {
            alert("checked");
        } else {
            alert("You didn't check it.");
        }
    }
    input.onchange = check;
    check();
}

解决方案 #

由于无法自定义ID或类，我们可以通过上下文关联定位到目标复选框组（比如基于问题文本“您想添加哪些活动？”找到对应的容器，再获取里面的复选框），然后实现多选限制逻辑：

window.addEventListener('load', function() {
    // 监听日期选择后的动态加载（因为复选框是选择日期后才显示的）
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // 找到包含目标问题的容器
            const questionContainer = document.querySelector('div:has(span:contains("您想添加哪些活动？"))');
            if (questionContainer) {
                const checkboxes = questionContainer.querySelectorAll('input[type=checkbox]');
                if (checkboxes.length > 0) {
                    // 给每个复选框绑定change事件
                    checkboxes.forEach(checkbox => {
                        checkbox.addEventListener('change', function() {
                            const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
                            if (checkedCount > 4) {
                                // 取消当前选中
                                this.checked = false;
                                alert('最多只能选择4个活动，请取消部分选择后重试。');
                            }
                        });
                    });
                    // 找到后停止监听
                    observer.disconnect();
                }
            }
        });
    });

    // 监听页面变化，等待复选框加载完成
    observer.observe(document.body, { childList: true, subtree: true });
});

代码说明 #

• 使用MutationObserver监听页面DOM变化，因为复选框是在选择日期/时间后动态生成的，window.onload可能无法捕获到
• 通过问题文本定位到复选框所在容器，避免影响页面其他复选框
• 每次复选框状态变化时统计已选中数量，超过4个则取消当前选中并弹出提示

注意事项 #

• 如果:has选择器在部分浏览器不兼容，可以改用遍历父元素的方式定位容器
• 测试时请先选择服务日期/时间，触发复选框加载后再测试选择限制功能

内容的提问来源于stack exchange，提问作者Chris 7