I have an input button which is an image. . I want to change the Image of that button depending on the scenario like On/Off mode. If user selects some check-boxes (selects item), button gets enabled/disabled.

For instance, below are On/Off buttons which I want to assign to same input button depending on the scenario.

Solution for that would be something like below:
Solution:

Event.observe(window, 'load', function(){
    $$('input.bulkSelectItem').each(function(s){
        Event.observe(s,'click', function(event){
            $('numberOfItemsSelected').update($$('input.bulkSelectItem:checked').length);
                if($$('input.bulkSelectItem:checked').length > 0){
                    $('cart_bulk').removeClassName('disabled').enable();
                } else{
                    $('cart_bulk').addClassName('disabled').disable();
                }
         });           
    });
});

[bold: default]

<input type=”submit” disabled=”true” name=”cart” class=”floatLeft disabled” id=”cart_bulk” onclick=”return someFunction(this.form);” alt=”Add Selected Items To Cart” border=”0″ />

#cart_bulk{background:url(/images/wishlist/addAllOn.gif); text-indent:-999px;width:163px;height:23px;font-size:0; line-height:0;border:0 none;}
#cart_bulk.disabled{background:url(/images/wishlist/addAllOff.gif);}

Advertisements