StateChange for the RadioButtons inside the EditorFor Not working

Question

My Main model class

public class MainModel 
{

        public ProblemType? problemType { get; set; }


        public SubProblemType? subProblem { get; set; }
}

Enum's

public enum ProblemType
    {
        ProblemA =1,
        ProblemB =2
    } 

public enum SubProblemType
    {
        SubProblemTypeA =1,
        SubProblemType =2
    } 

I also created my custom editortemplate(EditorTemplate/ProblemType.cshtml) for the both the enum

@Html.LabelFor(x => x, "ProblemA")
@if (Model == ProblemType.ProblemA)
{
    @Html.RadioButtonFor(x => x, (int)ProblemType.ProblemA, new { @checked = "checked" });
}
else
{
    @Html.RadioButtonFor(x => x, (int)ProblemType.ProblemA);
}

@Html.LabelFor(x => x, "ProblemB")
@if (Model == ProblemType.ProblemB)
{
    @Html.RadioButtonFor(x => x, (int)ProblemType.ProblemB, new { @checked = "checked" });
}
else
{
    @Html.RadioButtonFor(x => x, (int)ProblemType.ProblemB);
}

The SubProblemType EditorTemplate/SubProblemType.cshtml is also same as the above view

Now in my main view I've trying to do some validation(client side) if the user choose the ProblemA Radio box, then only I've to show the subproblemType Radio Boxes.

So far I tried like below in my mainView

<script type="text/javascript">
    $(function () {
        $("#problemType").on("change", StateChange(function () {
            if ($("#chkYes").is(":checked")) {
                $("#subProblem").show();
            } else {
                $("#subProblem").hide();
            }
        }));
    });

</script>


@Html.EditorFor(x => x.problemType, new { @onchange = "StateChange();" })

@Html.HiddenFor(x => x.subProblem)

But it's not working, I'm not getting triggered for change event when I choose the ProblemType Radio button in the js