单选按钮上的标签顺序不正确答案

【问题标题】：tab order on radio button not correct单选按钮上的标签顺序不正确
【发布时间】：2013-07-26 20:15:27
【问题描述】：

这是我的一个示例表单。

<input autocomplete="off"  id="FirstName" name="FirstName" type="text" value="" /><br/>
<input autocomplete="off" id="LastName" name="FirstName" type="text" value="" /><br/>    
<p style="float:left"><input id="YN_true" name="YN" type="radio" value="true" />Yes</p>
<p style="float:left"><input id="YN_false" name="YN" type="radio" value="false" >No</p>
<br/><br/>
<input autocomplete="off" id="CellPhone" maxlength="12" name="CellPhone" type="text" value="" />


$(document).ready(function(){  
  $("#FirstName").attr("tabindex", 1);
    $("#LastName").attr("tabindex", 2);
    $("#YN_true").attr("tabindex", 3);
    $("#YN_false").attr("tabindex", 4);
    $("#CellPhone").attr("tabindex", 5);   

}

如果您一直使用 tab，则 tab 顺序可以正常工作，但是如果您到达单选按钮，然后使用鼠标选择一个选项，然后按 tab 它将返回 tabindex 1。我需要设置tabindex 使用 jquery，因为我使用的是 MVC3，我需要使用 EditorFor。

有什么办法可以纠正还是正常？

注意这发生在 Chrome 中，而不是 IE。

编辑：我猜它是一个现有的错误https://code.google.com/p/chromium/issues/detail?id=181144

【问题讨论】：

标签： jquery html tabindex

【解决方案1】：

只需将 tabindex 添加到输入中，索引就会跳到下一个字段，因为单选是一种选择

编辑：我建议使用<label></label>，这样当用户单击“是”或“否”时，该选项会突出显示。

    <input autocomplete="off" id="FirstName" name="FirstName" type="text" value="test" tabindex=1 />
<br/>
<input autocomplete="off" id="LastName" name="FirstName" type="text" value="test" tabindex=2 />
<br/>
<p style="float:left">
    <input id="YN_true" name="YN" type="radio" value="true" tabindex=3 />
    <label for="Yn_true">Yes</label>
</p>
<p style="float:left">
    <input id="YN_false" name="YN" type="radio" value="false" />
    <label for="YN_false">No</label>
</p>
<br/>
<br/>
<input autocomplete="off" id="CellPhone" maxlength="12" name="CellPhone" type="text" value="" tabindex=5 />

【讨论】：

【解决方案2】：

我通过 $(this).focus(); 解决了这个问题在我的单选按钮上。

像这样：

$(document).ready(function(){  
    $("[type=radio]").click(function () {
        $(this).focus();
    });
  $("#FirstName").attr("tabindex", 1);
    $("#LastName").attr("tabindex", 2);
    $("#YN_true").attr("tabindex", 3);
    $("#YN_false").attr("tabindex", 4);
    $("#CellPhone").attr("tabindex", 5);   

}

【讨论】：