css 只能申请一个席位 <li> （限制多选）答案

【问题标题】：css has to apply only one seat <li> ( restrict multiple select)css 只能申请一个席位 <li> （限制多选）
【发布时间】：2014-03-31 07:07:13
【问题描述】：

巴士预订

以下代码生成multilpe <li>，当用户点击席位时，选中的席位css会发生变化。但我想限制多选。用户必须只允许选择一个座位，如果他选择第二个 <li> (seat) ，那么第一个必须取消选择

演示：http://demo.techbrij.com/780/seat-reservation-jquery-demo.php

代码：http://techbrij.com/seat-reservation-with-jquery

    $(function () {
        var settings = {
            rows: 6,
            cols: 6,
            rowCssPrefix: 'row-',
            colCssPrefix: 'col-',
            seatWidth: 30,
            seatHeight: 30,
            seatCss: 'seat',
            selectedSeatCss: 'selectedSeat',
            selectingSeatCss: 'selectingSeat'
        };

        var init = function (reservedSeat) {
            var str = [], seatNo, className;
            for (i = 0; i < settings.rows; i++) {
                for (j = 0; j < settings.cols; j++) {

                    seatNo = (i + j * settings.rows + 1);   // Seat No  eg : seatNo = 0+0*0+1 (1)
                    className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString(); // Class each seat class Name=seat row-0 col-0

                    if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
                        className += ' ' + settings.selectedSeatCss;
                    }

                    str.push('<li onclick="gettable('+ seatNo+')" class="' + className  +" table"+seatNo+ '">' 

                                +'<a title="' + seatNo + '">' + seatNo + '</a>' +
                              '</li>');
                }
            }
            $('#place').html(str.join(''));
        };




        var bookedSeats = [5, 10, 25];
        init(bookedSeats);


        $('.' + settings.seatCss).click(function () {
        if ($(this).hasClass(settings.selectedSeatCss)){
            alert('This seat is already reserved');
        }
        else{
            $(this).toggleClass(settings.selectingSeatCss);


            }
        });

【问题讨论】：

您能否也请提供您的 html/css 或者使用类似 jsfiddle.com
请在 jsfiddle.com 中展示您的代码
demo.techbrij.com/780/seat-reservation-jquery-demo.php

标签： javascript jquery

【解决方案1】：

首先从所有元素中删除该类，然后将其添加到选定的元素中。

$('.' + settings.seatCss).click(function () {
        if ($(this).hasClass(settings.selectedSeatCss)){
            alert('This seat is already reserved');
        }
        else{
            $('.' + settings.seatCss).removeClass(settings.selectingSeatCss);
            $(this).addClass(settings.selectingSeatCss);


            }
        });

【讨论】：

【解决方案2】：

将else部分改为：

 else{
      $(this).toggleClass(settings.selectingSeatCss);
      $(".settings.selectingSeatCss").not(this).removeClass('settings.selectingSeatCss');
      }

【讨论】：

【解决方案3】：

尝试用这个更改click()事件中的代码。

$('.' + settings.seatCss).click(function () {
   $(this).addClass(settings.selectedSeatCss).siblings(this).removeClass(settings.selectedSeatCss);
});

工作Demo。希望对你有帮助。

【讨论】：