Customize Radio and Checkbox Controls

[bdearborn]

Can custom control rendering be setup to make radio and checkbox controls look nice like in bootstrap?

http://getbootstrap.com/javascript/#buttons-checkbox-radio

[bdearborn]

JeasyUI support response:

The linkbutton components can act as radio and check buttons. Please refer to:

http://jsfiddle.net/yeyfccov/

[bdearborn]

Is there a way to bind the buttons to an input on a form? Also, it would be great if there were options to get/set items similar to a combo.

getValues
setValues
getValue
setValue

[stworthy]

A function 'makeButtonGroup' can be used to build the linkbutton groups in more easier way. This function will build a hidden <input> element that will be post to the server.

Code:

function makeButtonGroup(c, options){
    var input = $('<input type="hidden">').attr('name', options.name).insertAfter(c.children('a:first'));
    $(c).addClass('m-buttongroup');
    $(c).children('a').linkbutton($.extend({}, options, {
        toggle: true,
        onClick: function(){
            if (options.group){
                input.val($(this).attr('value'));
            } else {
                var vv = [];
                $(c).children('a').each(function(){
                    if ($(this).linkbutton('options').selected){
                        vv.push($(this).attr('value'));
                    }
                });
                input.val(vv.join(','));
            }
        }
    }));
}

Before calling this function, prepare the group elements.

Code:

<span id="rr">
    <a href="#" value="m">Modem</a>
    <a href="#" value="s">Scanner</a>
    <a href="#" value="t">Tablet</a>
</span>
<span id="cc">
    <a href="#" value="m">Modem</a>
    <a href="#" value="s">Scanner</a>
    <a href="#" value="t">Tablet</a>
</span>

Calling 'makeButtonGroup' function with 'group' property will build the radio buttons, otherwise build the check buttons.

Code:

makeButtonGroup($('#rr'), {
    name: 'n1',
    group: 'g2'
})
makeButtonGroup($('#cc'), {
    name: 'n2'
})