Question

Is there any straightforward mechanism to logically group together radio buttons in different fieldsets (i.e., permit only one selection)?

Answer 1

I had the same problem but I couldn’t move the fieldset as per jQuery Mobile limitations. So, using jQuery, I’ve mimicked radios using checkboxes:

// add click to all checkboxes
$(':checkbox').click(function(){
    // select all checkboxes with same name that are checked but not(this) 
    $(":checkbox[name='"+$(this).attr("name")+"']:checked").not(this).each(function(){
        // uncheck them - call checkboxradio("refresh") to update changes visually
        $(this).attr('checked', false).checkboxradio("refresh");
    });
});

This will work just as fine on radios. The .checkboxradio must be omitted if not using jQuery Mobile. This also still assumes that your checkboxes/radio buttons will be grouped by having the same name.

I had some additional stuff I wanted to do in the each() block. A shorter version is possible if you don’t have that requirement:

$(":checkbox[name='"+$(this).attr("name")+"']:checked").not(this).attr('checked', false).checkboxradio('refresh');