Search within TutorialsPark

jQuery UI : Button Methods


Learn how to use jQuery UI button Methods to control the buttons


jQuery UI : Button Method

The jQuery UI defines a number of method which can be used to control the button widget, once it is created.

These are not real methods, because you have to pass them as arguments to the button method, similar to button settings.

Table : jQuery UI Buttons Methods

Property Default Value
button("destroy") To return the HTML element to its former/original state.
button("disable") To disable the button
button("enable") To enable the button
button("option") To set one or multiple options, i.e configure the buttons
button("refresh") To refresh button state.

jQuery UI : Removing/Destroying the Button Widget

The jQuery UI provides a destroy method which is used to remove the button widget from the document and return to the original state.

In the demo, we use a click method to register the handler function for the button, the destory method disables the button.

Example: jQuery UI - Remove button using destory Method

Give it a TRY! » Note: Click the button to remove the button widget


jQuery UI : Enabling and Disabling the Button

jQuery UI provides the methods of enable and disable to control the status of the jQuery UI button.

In the demo, a checkbox is provided to register a function which will be called when the box is either checked or unchecked.

Example: jQuery UI - Enable and Disable Buttons

Give it a TRY! » Note:The method enable or disable is called to change the state of the button


jQuery UI: Refresh the State of jQuery UI button

The jQuery UI method of refresh is used to update the state of the button, it used to reflect any changes performed on the document.

In the demo, the button is disabled by using the checkbox, but we need to call the refresh method of affect the change.

Example: jQuery UI - Refresh the state of jQuery UI buttons

Give it a TRY! » Note: The change is not automatically detected hence we need to call the refresh method.


jQuery UI : Button Event

jQuery UI provide an event in addition to those available with the element.

The jQuery UI button widget provides only one event called create , which is triggered when the button widget is created.

Example: jQuery UI Button Events

Give it a TRY! » Note: Press the button to trigger the event.