tab order on radio button not correct

Question

Here is an example form I have.

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

}

The tab order works fine if you tab all the way through, but if you get to the radio buttons, then use the mouse to select an option, it then press tab it will go back to tabindex 1. I need to set tabindex using jquery because I am using MVC3 and I need to use EditorFor.

Is there a way to correct this or is it normal?

NOTE this happens in Chrome, not IE.

Edit: I guess its an existing bug https://code.google.com/p/chromium/issues/detail?id=181144

Answer 1

I've fixed this by putting $(this).focus(); on my radio buttons.

Like this:

$(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);   

}