Jquery 在具有html5表单属性的收音机上使用buttonset

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

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

，但它仍然没有更新

我正在使用

jqueryv2.0.0

和

jqueryuiv1.10.2

我知道这是失败的，因为表单属性，如果我将radio div包装在表单中，字段工作正常！我假设jQueryUI不允许表单属性

---

演示

表单是容器，或者至少是容器。不确定这在HTML5中是否发生了变化。看看这是否有帮助

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

$（'input:radio'）。单击（函数（）{
$（'input[name='+$（this）.attr（'name'）+']：未（：选中））.each（函数（）{
$（'label[for='+this.id+']'））
.removeClass（'ui-state-active'）；
});
});

---

这里有一把小提琴：

@Shannon Hochkins我的坏。尽管如此，如果jQueryUI需要包装表单标签，我还是会觉得有点不可思议。从您显示的内容来看，jQuery似乎正在将元素的样式正确地设置为按钮集。@ShannonHochkins在此处查看接受的答案，以确认您的浏览器是否完全支持表单标记。如果有，那么您需要查看jQuery UI按钮集的源代码。查看它是如何绑定click事件的，以查看它是否引用了父表单标记。我使用的是最新的chrome，这不是一个支持问题@B2kI添加了一个小提琴示例，向您显示jQuery不适用于此布局。@ShannonHochkins修复，使用我的答案中的更新：