jquery - 单选按钮上的 Tab 键顺序不正确

Question

这是我的示例表单。

http://jsfiddle.net/r45WL/

<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

Answer 1

我已经通过放置 $(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);   

}