Nascondere / visualizzare un campo di input basato sul valore di HtmlRadioButtonFor e renderlo obbligatorio se visualizzato

Ho uno scenario in cui ho due div diverse e la successiva dovrebbe scomparire in base al valore booleano del precedente div. se il valore del pulsante radio è vero, il div successivo deve essere archiviato come richiesto.

Codice effettivo:

Is Employment Offered? *

@Html.RadioButtonFor(model => model.IsOffered, true) @Html.Label("Yes") @Html.RadioButtonFor(model => model.IsOffered, false) @Html.Label("No")
Enter Employee Number
@Html.TextBoxFor(model => model.EmployeeNumber, new { @class = "form-control" })

  $("#employeeNumber").hide(); $("input[name='IsOffered']").on("change", function() { if ($(this).val() == "true") { $("#employeeNumber").show(); } }); 

Ho provato sopra, ma senza fortuna. Grazie per il tuo tempo!

Cambialo in "True" :

 $("#employeeNumber").hide(); $("input[name='IsOffered']").on("change", function () { if ($(this).val() === "True") { $("#employeeNumber").show(); } else { $("#employeeNumber").hide(); } }); 

Perché Boolean.ToString() ripresenta "True" anziché "true" . Quindi questo valore viene aggiunto alla radio che viene generata dal razor.

Perché?