Friday, August 31, 2012

How to Disable a Button Using Jquery and CSS ?


How to Disable a Button ? :


Disable a Button Using Jquery and CSS


Step 1:

Using Jquery attr Attribute :

$('.actionButton').attr('disabled', 'disabled');

Step 2:

Using Jquery addClass CSS Class :

$('.actionButton').addClass('disabled');

Step 3:

Then by Declaring CSS Style Class :

    <style type="text/css">
        .disabled
        {
            background: none repeat scroll 0 0 burlyWood;
            cursor: default !important;
        }
    </style>

Note : Important thing here is you have to give proper cursor style like above when button is in Disable State

How to Enable a Button Again ? :

Step 1 :

Using Jquery removeAttr Attribute :

$('.actionButton').removeAttr('disabled');

Step 2 :

Using Jquery removeClass CSS Class :

$('.actionButton').removeClass('disabled');

Conclusion
You can Disable or Enable a button which was disable earlier by using above methods easily.

Happy Coding.


4 comments:

Thanks for your Feedback.