如何限制所选座位数并在jquery座位表中的html表单上解析所选座位？

Question

我正在将jquery席位图集成到我的html表单中。我有以下html和javascrit显示座位图并允许我与地图进行交互：

HTML

<!--- Sidebar -->
    <aside class="one-fourth sidebar left">
        <form role="form" method="get" action="booking-step2">
            <input type="hidden" name="travel_from">
            <input type="hidden" name="travel_to">
            <input type="hidden" name="travel_date">
            <input type="hidden" name="id">
            <input type="hidden" name="total_travellers">
            <input type="hidden" name="journey_type">

        <div class="widget">
            <!--Seat Map-->
            <div id="legend"></div>
            <div id="seat-map" class="seat-panel">
                <div class="front-indicator">Front</div>
            </div>
            <div class="booking-details">
                <h3> Selected Seats (<span id="counter">0</span>):</h3>
                <ul id="selectedseats"></ul>
                <input type="hidden" id="selected_seats" name="seat" value="">
                Total: <b>Ksh.<span id="total">0.00</span></b>
            </div>
            <!--Seat Map-->
        </div>
        <input type="button" name="Submit">
    </form>
</aside>
<!--Sidebar-->

的Javascript

<script>

        $(document).ready(function() {

            var $cart = $('#selectedseats'),
                $counter = $('#counter'),
                $total = $('#total'),
                sc = $('#seat-map').seatCharts({
                map: [
                    'e[1,1]e[2,1X]_',
                    'e[4,2]e[5,3]e[6,4]',
                    'e[7,5]e[8,6]e[9,7]',
                    'e[10,8]e[11,9]e[12,10]',
                    'e[13,11]e[14,12]e[15,13]',
                ],
                seats: {
                    e: {
                        price   : 450,
                        classes : 'standard-seat', //your custom CSS class
                        category: 'Standard Class'
                    }                   

                },
                naming : {
                    top : false,
                    getLabel : function (character, row, column) {
                        return firstSeatLabel++;
                    },
                },
                legend : {
                    node : $('#legend'),
                    items : [
                        [ 'e', 'available',   'Available'],
                        [ 'f', 'unavailable', 'Booked']
                    ]                   
                },
                click: function () {
                    if (this.status() == 'available') {
                        //let's create a new <li> which we'll add to the cart items


                        /*
                         * Lets update the counter and total
                         *
                         * .find function will not find the current seat, because it will change its stauts only after return
                         * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
                         */

                        $('<span class="badge badge-primary">'+this.settings.label+',</b></span>')
                        .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') {
                        //update the counter
                        $counter.text(sc.find('selected').length-1);
                        //and total
                        $total.text(recalculateTotal(sc)-this.data().price);

                        //remove the item from our cart
                        $('#cart-item-'+this.settings.id).remove();

                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });

            //this will handle "[cancel]" link clicks
            $('#selectedseats').on('click', '.cancel-cart-item', function () {
                //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
                sc.get($(this).parents('li:first').data('seatId')).click();
            });

            //let's pretend some seats have already been booked
            sc.get(['10', '9', '7']).status('unavailable');

        });

        function recalculateTotal(sc) {
        var total = 0;

        //basically find every selected seat and sum its price
        sc.find('selected').each(function () {
            total += this.data().price;
        });

        return total;
        }       
</script>

我想做两件事：

1. 将所选席位数限制为3
2. 当我点击提交时，我希望表单中包含所选的席位。

我很感激任何解决方法。