如何限制jQuery-Seat-Charts仅允许选择单个座位？

要实现仅能选中单个座位的限制，核心逻辑是在选中新座位前自动取消所有已选中的座位，利用库本身的点击事件逻辑完成状态重置，无需额外隐藏或禁用元素。

修改你的click事件处理函数即可，具体改动如下：

click: function () {
    if (this.status() == 'available') {
        // 先取消所有已选中的座位
        sc.find('selected').each(function() {
            this.click();
        });

        // 以下为原有的选中座位逻辑，保持不变
        $('<li class="circulos">'+this.settings.label+',</li>')
            .attr('id', 'cart-item-'+this.settings.id)
            .data('seatId', this.settings.id)
            .appendTo($cart);
        
        $counter.text(sc.find('selected').length+1);
        $total.text(recalculateTotal(sc)+this.data().price);
        
        return 'selected';
    } else if (this.status() == 'selected') {
        // 原有的取消选中逻辑，保持不变
        $counter.text(sc.find('selected').length-1);
        $total.text(recalculateTotal(sc)-this.data().price);
    
        $('#cart-item-'+this.settings.id).remove();
    
        return 'available';
    } else if (this.status() == 'unavailable') {
        return 'unavailable';
    } else {
        return this.style();
    }
}

改动说明 #

• 在选中新座位的分支中，新增sc.find('selected').each(function() { this.click(); })：遍历所有已选中的座位并触发点击事件，自动调用原有的取消选中逻辑（移除购物车项、更新总价）。
• 原有选中和取消选中的逻辑完全保留，无需额外修改，确保功能连贯性。

这样修改后，每次点击新的可用座位时，系统会先清空之前的选中状态，再选中当前座位，实现严格的单选限制。

内容的提问来源于stack exchange，提问作者Jeremias Rosas