0

I have a scenario where I have two different div's and the later should disappear based on boolean value from earlier div. if the radiobutton value is true, later div should be a required filed.

Actual Code:

<div class= row ">
<div class="row col-lg-offset-2 top-buffer">
    <h4><strong><span>Is Employment Offered?</span> <span class="text-danger">*</span></strong></h4>
        @Html.RadioButtonFor(model => model.IsOffered, true) @Html.Label("Yes")
        @Html.RadioButtonFor(model => model.IsOffered, false) @Html.Label("No")
        <br>
</div>
<div class="row col-lg-offset-2 top-buffer" id="employeeNumber">
    <div class="col-sm-2"><b>Enter Employee Number</b></div>
        <div class="col-sm-10">
                @Html.TextBoxFor(model => model.EmployeeNumber, new { @class = "form-control" })
            <br />
        </div>
    </div>
</div>


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

I tried above, but no luck. Thanks you for your time!

Pradvaar cruz
  • 281
  • 1
  • 9
  • 21
  • You need to use a conditional attribute, for example a [foolproof](http://foolproof.codeplex.com/) `[RequiredIf]`, or if you want to write your own - [The Complete Guide To Validation In ASP.NET MVC 3 - Part 2](https://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2) –  Sep 12 '17 at 22:40

1 Answers1

1

Change it to "True":

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

Because Boolean.ToString() returs "True" instead of "true". So this value is added to the radio that is generated by razor.

Why?

adiga
  • 34,372
  • 9
  • 61
  • 83