ButtonGroup with checkbox mode radio behavior

[wnemaParticipant]

Once selected a radio button cannot be un-selected. Adding a meaningless N/A button isn’t any better. So, here’s what I tried which isn’t working
HTML:
<div id=’rdoLike’>
<button style=”padding:4px 16px;” id=”b0″>Like</button>
<button style=”padding:4px 16px;” id=”b1″>Dislike</button>
</div>
JS
$(“#rdoLike”).on(‘buttonclick’, function (event) {
var clickedButton = event.args.button,
idx = clickedButton.index(),
otherButtonId = ‘#b’ + (idx ^ 1),
otherButton = $(otherButtonId);
if (otherButton.hasClass(‘jqx-fill-state-pressed’) && !clickedButton.hasClass(‘jqx-fill-state-pressed’)) {
otherButton.removeClass(‘jqx-fill-state-pressed’).removeClass(‘jqx-group-button-pressed’);
otherButton.trigger(‘unselected’);
}
});
Thank you

[wnemaParticipant]

The behavior I wanted using jQuery is:
HTML

    <input class="chkRelevance" type="checkbox" id="chkRel1" />
    <label for="chkRel1">Relevant</label>
    <span> </span>
    <input class="chkRelevance" type="checkbox" id="chkRel0" />
    <label for="chkRel0">Not Relevant</label>

JS

    $(".chkRelevance").on('click', function (event) {
        var me = $(this),
            meChecked = me.prop('checked'),
            idx = parseInt(me.attr('id').substr(6)),
            other = $('#chkRel' + (idx ^ 1));
        if (meChecked && other.prop('checked')) {
            other.prop('checked', false);
        }
    });

[HristoParticipant]

Hello wnema,

You could use mode: 'radio'
Please, take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/buttongroup.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts