html element not working inside radio button list

Question

I have radio button list and inside one of its itemlists I have html input type="text".

When I select the option with input text field, and then click on the text field the focus gets lost and focus shifts to radio button list item that is selected.

Here is the display what I am trying to achieve

When I click on "Dealer Name" the focus gets shifted to Dealer radio button and so user can not type "Dealer Name"

This above behavior is happening in firefox. In Chrome it's not causing any problem

UPDATED:

This is the code I used when selected index change

$("#rOD").change(function () {
        if ($("#rOD input:checked").val() == "Dealer") { $("#txtDName").removeAttr("disabled"); }
        else { $("#txtDName").attr("disabled", "disabled"); }
    });

I have tried using following code to change focus

function fc(elem) {
        $("#rOD").focusout();
        $(elem).focus();
    }

And this is the markup

<asp:RadioButtonList Font-Size="Small" ID="rOD" data-toggle="popover" title="Field required"
        data-content="Please Select" ClientIDMode="Static" runat="server"
        RepeatDirection="Vertical">
        <asp:ListItem Text="Owner" Value="Owner">Owner</asp:ListItem>
        <asp:ListItem Text="Dealer" Value="Dealer">Dealer&nbsp <input type="text" id="txtDName" onclick="return fc(this);" placeholder="Dealer Name" disabled="disabled" data-toggle="popover" title="Field required" data-content="Please Select" style="width:150px"  /> </asp:ListItem>
    </asp:RadioButtonList>

Answer 1

try this jQuery code:-

$("#rOD").click(function (e) {
    $("#rOD input:checked").next().find('input').focus();
});
$("#rOD").change(function (e) {
    if ($("#rOD input:checked").val() == "Dealer") {
        $("#txtDName").removeAttr("disabled");
        e.preventDefault();
    } else { 
        $("#txtDName").attr("disabled", "disabled"); 
    }
});