checkboxradio JQuery UI


Checkbox and radio buttons along with the labels can be styled by using this widget. We can apply different themes available and still apply all the events and effects like normal checkbox or radio buttons.
Classes
Type : Object
Default :
{
  "ui-checkboxradio-label": "ui-corner-all",
  "ui-checkboxradio-icon": "ui-corner-all"
}
To get the associated Class of the Tab
var present_class = $( ".r2,c2" ).checkboxradio( "option", "classes.ui-checkboxradio"  );
To Set the class
$(".r3,c2").checkboxradio("option", "classes.ui-checkboxradio", "highlight" );
disabled
Type : Boolean
Default : false
$( ".r2" ).checkboxradio({
disabled:false
});
Specify checkboxradio to be disabled
$( "#my_checkboxradio" ).checkboxradio({
disabled:true   
});
Getting checkboxradio option disabled value
var status = $( ".r2" ).checkboxradio( "option", "disabled" )
To Set the disabled option
$( ".r2" ).checkboxradio( "option", "disabled", true)
We can enable or disable checkboxradio by using above code.
icon
Type : Boolean
Default : true

To show the checkbox or radio button icons
$( ".r2" ).checkboxradio({
icon : true
});
Getting show option value
var status = $( ".r2" ).checkboxradio("option", "icon");
To Set the icon option value
$(".r2").checkboxradio( "option","icon", true );
label
Type : String
Default : null

If option is set to null then the HTML associated with the button will be shown.
Here is the code to show custom label.
$( ".r2" ).checkboxradio({
label:'My Label'
});
Getting checkboxradio option lablel value
var status = $( ".r2" ).checkboxradio( "option", "label" )
To Set the track option
$( ".r2" ).checkboxradio( "option", "label", 'My Label')
Methods
Destroy()
Removes the functinality
$( ".r2" ).checkboxradio( "destroy" );
disable()
Disable the checkboxradio
$( ".r2" ).checkboxradio( "disable" );
We can enable and disable the elements by using both enable and disable methods.
enable()
Enable the checkboxradio (previously disabled )
$( ".r2" ).checkboxradio( "enable" );
instance()
Retrive checkboxradio instance object
$( ".r2" ).checkboxradio( "instance" );
option()
Get the value of the given Option name
var p_active = $( ".r2" ).checkboxradio( "option", "icon" )
We can get all the options with value by using an object containing key value pairs.
refresh()
After updating status of any native element , we have to refresh the checkboxradio to reflect the changes by invoking refresh
$( ".r2" ).checkboxradio( "refresh" )
widget()
Invoke the widget method
var widget = $( ".r2" ).checkboxradio( "widget" );
Events
create()
Triggered when checkboxradio is created
$( ".r2" ).checkboxradio({
  create: function( event, ui ) {}
});

Managing width font size of checkboxradio

<style>
.ui-button,  .ui-button-text .ui-button{  
font-size: 16px !important; 
}
</style>
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer