How to dynamically display a textbox and make it required based on radiobox selected in my ASP.NET MVC 5 application

So, I am learning basics of Jquery. I have two radioboxes and one textbox, and if "first" radiobox is selected hide the textbox and if "Second" radiobox is selected I want to show a textbox and make it as "Required Field" too at the same time. I tried some solution, but I think I overcomplicated it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10">
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>      
<div class="col-md-10">
    <input class="form-control" id="Email" name="Email" type="text" value="">
</div>

Steps I followed to achieve to my solution.

1. added one class "MyTextBoxClass" to the textbox - [Not sure if it was necessary]

2. Added "display to none"

3. Added one class "MyRadioClass" to the radiobox - [Not sure if it was necessary]

   <div> <input class="MyRadioClass" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker <input class="MyRadioClass" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar </div>

4. Added a "CHANGE" event on that MyRadioClass
5. On change checked the value of the radiobox,
6. If it is second one then removed the Style attribute so that NONE is taken out and added "Required Attribute"
7. If it is the first checkbox then add display as none

$('.MyRadioClass').on('change', function () {
    if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
    {
        $('.MyTextBoxClass').removeAttr("style");
        $('.MyTextBoxClass #Email').attr('required','required');
    }
    else {
        $('.MyTextBoxClass').css('display', 'none');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10 MyRadioClass">
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>
        
<div class="col-md-10 MyTextBoxClass" style="display:none;">
    <input class="form-control" id="Email" name="Email" type="text" value="">
</div>

Question 1. When I submit the form the "Required" attribute is not getting appended. I am able to submit the form without putting any value in the textbox.

Question 2. Is there a more sleek way of doing what I wanted to achieve?

My Actual Code:

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    <div class="form-group MyRadioClass">
        <div class="col-md-10">
            @Html.RadioButtonFor(m => m.SelectedRoleType, "JobSeeker", new { @class="js-radio"}) Job Seeker
            @Html.RadioButtonFor(m => m.SelectedRoleType,"Referrer", new { @class="js-radio"}) Referrar
        </div>
    </div>
    <div class="form-group MyTextBoxClass" style = "display:none" ">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type = "submit" class="btn btn-default" value="Register" />
        </div>
    </div>

}
<button class="btn btn-info">
    <i class="fa fa-lg fa-fw fa-facebook"></i>
    facebook
</button>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>
    $('.MyRadioClass').on('change', function () {
        if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
        {
            $('.MyTextBoxClass').show();
            $('.MyTextBoxClass input').attr('required', true);

        }
        else {
            $('.MyTextBoxClass').hide();
        }
    });

</script>