在带有html5表单属性的无线电上使用buttonset

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

我知道这是因为form属性而失败，如果我将无线电div包装在表单中，则字段工作正常！我假设Jquery UI不允许表单属性？

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