Using buttonset on radios with html5 Form Attribute

Question

I have multple pages using the same layout as below, the only thing that is different about this page, is that I have to have multiple forms on the same page, so I'm using the form="" html5 attribute.

<form id="edit" name="edit"></form>
<label>STATUS</label>
<div class="radios padTop" id="status">
    <label class="inline true" for="active">ACTIVE</label>
    <input type="radio" name="status" form="edit" value="1" id="active" />
    <label class="inline false" for="inactive">INACTIVE</label>
    <input type="radio" form="edit" name="status" value="0" id="inactive" checked="checked" />';
</div>

The page renders correctly on page load:

However If I'm to click on 'Active', it doesn't remove the class 'ui-state-active' on the inactive radio button like it does on my other pages and renders like this:

I have tried calling $('.radios').buttonset('refresh') and it still doesn't update.

I'm using jQuery v2.0.0 and jQuery UI v1.10.2

I know that this is failing because of the form attribute, if I wrap the radio div inside the form the field works fine! I'm assuming that Jquery UI doesn't allow for the form attribute?

DEMO http://jsfiddle.net/3D4Ce/3/

Answer 1

Forms are containers, or at least they have been. Not sure if that changed in html 5. See if this helps.

<form id="edit" name="edit">
    <label>STATUS</label>
    <div class="radios padTop" id="status">
        <label class="inline true" for="active">ACTIVE</label>
       <input type="radio" name="status" form="edit" value="1" id="active" />
       <label class="inline false" for="inactive">INACTIVE</label>
       <input type="radio" form="edit" name="status" value="0" id="inactive"
          checked="checked" />';
   </div>
</form>

UPDATED You could add a click event to handle this yourself

<script>
   $('input:radio').click(function() {
       $('input[name='+$(this).attr('name')+']:not(:checked)').each(function() {
          $('label[for='+this.id+']')
           .removeClass('ui-state-active');
       });
   });
</script>

Here's a fiddle: http://jsfiddle.net/753pu/