Question

我正在制作列表项，当我选择（点击）项目时，按钮会从禁用按钮转到启用按钮。我刚刚尝试过，但问题是当我取消选择项目时，按钮不会变为禁用状态。我该如何修复脚本？请帮忙〜

这是小提琴http://fiddle.jshell.net/RUgsH/

这是代码

<div class="boxList">
                     <table>
                    <tr>
                        <td>
                            <a href="#" data-ajax="false"><span>item1</span></a>
                        </td>
                        <td>
                            <a href="#" data-ajax="false"><span>item2</span></a>
                        </td>
                        <td>
                            <a href="#" data-ajax="false"><span>item3</span></a>
                        </td> 
                    </tr>
                    <tr>
                        <td>
                            <a href="#" data-ajax="false"><span>item4</span></a>
                        </td>
                        <td>
                            <a href="#" data-ajax="false"><span>item5</span></a>
                        </td>
                        <td>
                            <a href="#" data-ajax="false"><span>item6</span></a>
                        </td>  
                    </tr> 
                    </table>
                </div>



<div class="popBtnWrap2">
                    <a href="#" class="btnSchd1 ui-disabled">Button</a>
                    <a href="#" class="btnSchd2 ui-disabled">Button</a>
                </div>

                $('.boxList td').on('click',function(){ 
                    $('.popBtnWrap2 a').removeClass("ui-disabled"); 
                    var $this = $(this); 

                    if ($this.hasClass("selected")) {
                        $this.removeClass("selected");
                    }else{
                        if ($('.boxList td.selected').length !== 3){
                            $this.addClass("selected");
                        }
                    }
                }); 



.boxList table { table-layout:fixed; width:100%; border-spacing: 2px; border-collapse: separate; margin:0; padding:0; }
.boxList td { width:33.3%; padding:0; margin:0; text-align:center; background:#f4830b;}
.boxList td.selected a { background:#cc471e;} 




.popBtnWrap2 { overflow:hidden; margin:20px 0 0 0;  }
.popBtnWrap2 a { display:block; float:left; width:-webkit-calc(33% - 5px); width:-moz-calc(33% - 5px); width:calc(33% - 5px);  }
.popBtnWrap2 a:last-child { width:34% !important; margin:0 !important; }
.popBtnWrap2 .btnSchd1 {  background:#434343; }
.popBtnWrap2 .btnSchd2 {  background:#434343;   }

.ui-disabled { opacity:0.4; }

Answer 1

使用JQuery中的ToggleClass。很好地服务于这个目的。

fiddle已从你的分叉。

希望这就是你所需要的。

$('.boxList td').on('click', function () {
    var $this = $(this);
    $this.toggleClass("selected");

    var selections = $(".selected");

    if (selections && selections.length > 0) {
        $('.popBtnWrap2 a').removeClass("ui-disabled");
    } else {
        $('.popBtnWrap2 a').addClass("ui-disabled");
    }

});

Answer 2

尝试

$('.boxList td').on('click', function () {
    var $this = $(this);

    if ($this.hasClass("selected")) {
        $this.removeClass("selected");
    } else {
        if ($('.boxList td.selected').length < 3) {
            $this.addClass("selected");
        }
    }
    $('.popBtnWrap2 a').toggleClass("ui-disabled", $('.boxList td.selected').length == 0);
});

演示：Fiddle

Answer 3

这是使用较少代码执行此操作的简单方法

    $('.boxList td').on('click',function(evt){ 
        var $this = $(evt.currentTarget);
        $this.toggleClass("selected", 
                      !$this.hasClass('selected') && 
                      $('.boxList td.selected').length < 3);
        $(".popBtnWrap2 a").toggleClass("ui-disabled", 
                      $('.boxList td.selected').length==0);
    });

Fiddle

点击项目时，jquery启用/禁用按钮

3 个答案: