ASP.Net MVC: How to supress jquery unobtrusive cli

Question

see my code first.

View and view model

public class SampleViewModel
{
    [Display(Name = "Products")]
    public List<Product> Products { set; get; }

    [Required(ErrorMessage = "Select Male or Female")]
    public string Gender { get; set; }
}

public class Product
{
    public int ID { set; get; }
    public string Name { set; get; }
}

controller code

public ActionResult Index()
{
    var SampleVM = new SampleViewModel();
    SampleVM.Products = new List<Product>
    {
    new Product{ ID=1, Name="IPhone" },
    new Product{ ID=2, Name="MacBook Pro" },
    new Product{ ID=3, Name="iPod" }           
    };
    return View(SampleVM);
}

View code

@using (Html.BeginForm("Index", "TestVal", FormMethod.Post, new { name = "TestVal" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>DateValTest</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
        @Html.LabelFor(model => model.Products, htmlAttributes: new { @class = "control-label col-md-2", style = "padding-top:0px;" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.SelectedProductId, new SelectList(Model.Products, "ID", "Name"), "-- Select Product--")
            @Html.ValidationMessageFor(model => model.SelectedProductId, "", new { @class = "text-danger" })

            @for (int i = 0; i < Model.Products.Count(); i++)
            {
            <div>
                @Html.HiddenFor(model => Model.Products[i].Name)
                @Html.HiddenFor(model => Model.Products[i].ID)
            </div>
            }
        </div>
    </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
            <b>Gender</b><br />
            <label>
                <span>Male</span> @Html.RadioButtonFor(model => model.Gender, "Male", new { style = "width:20px;" })
                <span>Female</span>@Html.RadioButtonFor(model => model.Gender, "Female", new { style = "width:20px;" })
            </label>
            <label>
            </label>
            @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
            </div>
    </div>

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

so now tell me when i click on submit button without select gender radio button then validation message will appear but i want to suppress it and i want to show this validation message conditionally.

suppose product dropdown is showing 4 product say product1,product2....product4.

i want if user select product4 then gender radio button validation will not fire at client side else user has select any gender.

please guide me with sample code that what jquery code i need to plugin at client which will suppress gender validation message at client and some time will not suppress based on condition at the time of form submit.

looking for best guidance. thanks