Enables or disables the jqxButtonGroup.

Code examples

Set the disabled property.

$('#jqxButtonGroup').jqxButtonGroup({disabled: false });

Get the disabled property.

var disabled = $('#jqxButtonGroup').jqxButtonGroup('disabled');

Enables or disabled the highlight state.

Code examples

Set the enableHover property.

$('#jqxButtonGroup').jqxButtonGroup({enableHover: true });

Get the enableHover property.

var enableHover = $('#jqxButtonGroup').jqxButtonGroup('enableHover');

Sets or gets the jqxButtonGroup's mode.

Possible Values:

'checkbox'

'radio'

'default'

Code examples

Set the mode property.

$('#jqxButtonGroup').jqxButtonGroup({mode: 'radio' });

Get the mode property.

var mode = $('#jqxButtonGroup').jqxButtonGroup('mode');

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxButtonGroup').jqxButtonGroup({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxButtonGroup').jqxButtonGroup('rtl'); 

Determines the template as an alternative of the default styles.

Possible Values:

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

Code examples

Set the template property.

$("#jqxButtonGroup").jqxButtonGroup({ template: 'primary'});

Get the template property.

var template = $('#jqxButtonGroup').jqxButtonGroup('template');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

This event is triggered when a button is clicked.

Code examples

Bind to the buttonclick event by type: jqxButtonGroup.

$('#jqxButtonGroup').on('buttonclick', function () { // Some code here. }); 

This event is triggered when a button is selected - in checkboxes or radio buttons mode.

Code examples

Bind to the selected event by type: jqxButtonGroup.

$('#jqxButtonGroup').on('selected', function () { // Some code here. }); 

This event is triggered when a button is unselected - in checkbox or radio buttons mode.

Code examples

Bind to the unselected event by type: jqxButtonGroup.

$('#jqxButtonGroup').on('unselected', function () { // Some code here. }); 

Disables a button at specific index.

Code examples

Invoke the disableAt method.

$('#jqxButtonGroup').jqxButtonGroup('disableAt', 0); 

Disables jqxButtonGroup.

Code examples

Invoke the disable method.

$('#jqxButtonGroup').jqxButtonGroup('disable'); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxButtonGroup').jqxButtonGroup('destroy'); 

Enables the jqxButtonGroup.

Code examples

Invoke the enable method.

$('#jqxButtonGroup').jqxButtonGroup('enable'); 

Enables a button at specific index.

Code examples

Invoke the enableAt method.

$('#jqxButtonGroup').jqxButtonGroup('enableAt', 0); 

Focuses the widget.

Code examples

Invoke the focus method.

$('#jqxButtonGroup').jqxButtonGroup('focus'); 

Gets the index or indexes of the selected button(s).

• Returns undefined when the "mode" property is "default".
• Returns the index of the selected button when the "mode" property is set the "radio". For example, if the first button is selected, the retuned value is 0.
• Returns an array of the selected buttons when the "mode" property is set to "checkbox". For example, if you have a group of three buttons and the first and third buttons are selected, the returned value will be [0, 2]

Code examples

Invoke the getSelection method.

var jqxButtonGroup = $('#jqxButtonGroup').jqxButtonGroup('getSelection'); 

Renders the widget.

Code examples

Invoke the render method.

$('#jqxButtonGroup').jqxButtonGroup('render'); 

Selects a button in checkbox or radio buttons mode

Code examples

Invoke the setSelection method. The index is zero-based. For selecting the first button, call the method with 0.

$('#jqxButtonGroup').jqxButtonGroup('setSelection', 0);