在带有 html5 表单属性的收音机上使用按钮集

Question

我有多个页面使用与下面相同的布局，这个页面唯一不同的是我必须在同一页面上有多个表单，所以我使用form="" html5 属性。

<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>

页面在页面加载时正确呈现：

但是，如果我要单击“活动”，它不会像在我的其他页面上那样删除非活动单选按钮上的 'ui-state-active' 类，并呈现如下：

我试过打电话给$('.radios').buttonset('refresh')，还是没有更新。

我正在使用jQuery v2.0.0 和jQuery UI v1.10.2

我知道这是由于表单属性而失败的，如果我将单选 div 包装在表单中，则该字段可以正常工作！我假设 Jquery UI 不允许 form 属性？

演示 http://jsfiddle.net/3D4Ce/3/

Answer 1

表单是容器，或者至少它们曾经是。不确定 html 5 中是否发生了变化。看看这是否有帮助。

<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>

更新你可以添加一个点击事件来自己处理这个

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

这是一个小提琴：http://jsfiddle.net/753pu/