CODEWITHSUNDEEP
jquery
user3400080
user3400080

Reputation: 211

jquery able/disable button when click items

I'm making the list-items, and when I select(click) items, the button turn to enable button from disable button. I just tried well, but the problem is when I dis-select item, the button is not turn to disabled. How do I have to fix the script ? Please help~

Here is fiddle http://fiddle.jshell.net/RUgsH/

And this is the codes

<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; }

Upvotes: 0

Views: 62

Answers (3)

jonycheung
jonycheung

Reputation: 850

Here's a simple way to do this with less code

    $('.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

Upvotes: 0

Serendipity
Serendipity

Reputation: 1037

Use ToggleClass from JQuery. Serves this purpose well.

A fiddle has been forked from yours.

Hope that is what you needed.

$('.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");
    }

});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$('.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);
});

Demo: Fiddle

Upvotes: 1

Related Questions