jQuery UI: Radiobutton- und Checkbox-Replacement

$('#toggle-all').click(function(){ $('#example input[type=checkbox]').checkBox('toggle'); return false; }); $('#check-all').click(function(){ $('#example input[type=checkbox]').checkBox('changeCheckStatus', true); return false; }); $('#uncheck-all').click(function(){ $('#example input[type=checkbox]').checkBox('changeCheckStatus', false); return false; });
$('#check-2').click(function(){ $('#example input[type=radio]:eq(1)').checkBox('changeCheckStatus', true); return false; }); $('#native').click(function(){ //native methode $('#example input[type=radio]:eq(0)').attr({checked: true, disabled: true}) //reflect the current state .checkBox('reflectUI'); return false; }); $('#native-prop').click(function(){ //native methode prop (in case of jQuery 1.6 and higher and the prop method you won't need to reflect the state manually) $('#example input[type=radio]:eq(2)').prop({checked: true}); return false; });
option description
replaceInput: [true|false] hide original input-element
addLabel: [true|false] add checkbox/radiobutton state-classes also to the label-element
addVisualElement: [true|false] adds a span element as a replacement for the input element (if you turn this to false, you can still style the label-element) (see label-only demo
$('input').checkbox({ addLabel: false });
Classes to style label/visual element
class description
ui-radio/ui-checkbox role style always attached
ui-radio-hover/ui-checkbox-hover attached on mouseenter/focus and removed on mouseleave/blur
ui-radio-checked/ui-checkbox-checked attached, if checked
ui-radio-disabled/ui-checkbox-disabled attached if control is disabled
radio-focus/checkbox-focus attached on focus and removed on blur
radio-invalid/checkbox-invalid HTML5 validity test (works also in IE with webshims lib)
event description
click click on associated label, checkbox/radiobutton or visual element (last since version 1.3)
checkboxdisabledchange change in terms of disabled-state
checkcoxchange change in terms of checked/unchecked-state
$('input') .checkbox({ 'change': function(e, ui){ //checked or unchecked || $(this).is(':checked') === ui.checked }, 'disabledchange': function(e, ui){ //$(this).attr('disabled') === ui.disabled } }) ;
method description
reflectUI transfer the current states (disabled, checked) of the original input-element to the label and visual replacement-element
changeCheckStatus [true|false] true -> check | false -> uncheck
toggle toggles checked-state
enable enables disabled checkboxes
disable disables enabled checkboxes
//$('input').checkbox(); ... //... //check first checkbox $('input:first').checkbox('changeCheckStatus', true);

Back to the checkbox and radiobutton replacement - tutorial, Back to protofunc