jquery - Unable to render web form base on user's selected option -

i new jquery , trying learn it. have create simple mvc 5 example app me understand.

this code customerviewmodel

public class customerviewmodel {     public int id { get; set; }     [display(name ="existing customer?")]     [required(errormessage = "are existing customer?")]     public bool? existingcustomer { get; set; }      [display(name = "have cnn #?")]     [requiredif("existingcustomer", true, errormessage = "do have cnn?")]     public bool? doyouhavecnnnumber { get; set; }      [display(name = "your ccn #")]     [requiredif("existingcustomer", true, errormessage = "enter ccn number")] // if existing customer ask customerconfirmationnumber     public string customerconfirmationnumber { get; set; } // customer provide customerconfirmationnumber (ccn)      [display(name = "reason?")]     [requiredif("existingcustomer", false, errormessage = "provide reason why dont have ccn.")] // if isting customer doesn't have ccn ask reason     public string reasonfornothaveccn { get; set; } // customer give reason why dont have customerconfirmationnumber  } 

what wanted create app first ask if person existing customer. if person answer no don't have anything. however, if person enter yes want display question asking if person has customerconfirmationnumber. if person answer yes ask them enter number. if person answer no ask them enter reason of why don't have. picture below explain in more details of problem:

i have created view jquery started. have taken me few hours not progress. hoping if me how code this.

thank much.

this code view

    @model webapplication2.models.customerviewmodel  @{     viewbag.title = "create";      bool existingcustomerflag = model.existingcustomer.hasvalue ? model.existingcustomer.value : false;     string existingcustomerclass = existingcustomerflag ? "" : "hidden";      bool doyouhavecnnflag = model.doyouhavecnnnumber.hasvalue ? model.doyouhavecnnnumber.value : false;     string doyouhavecnnflagclass = doyouhavecnnflag ? "" : "hidden"; }  <h2>create</h2>  @using (html.beginform())  {     @html.antiforgerytoken()      <div class="form-horizontal">         <h4>customerviewmodel</h4>         <hr />          @html.validationsummary(true, "", new { @class = "text-danger" })          <div class="form-group">             @html.labelfor(model => model.existingcustomer, htmlattributes: new { @class = "control-label col-md-2" })             <div id="existingcustomerornot" class="span4">                 <label class="radio-inline">@html.radiobuttonfor(model => model.existingcustomer, true, new { id = "existingcustomer_true" }) yes</label>                 <label class="radio-inline">@html.radiobuttonfor(model => model.existingcustomer, false, new { id = "existingcustomer_false" }) no</label>                 @html.validationmessagefor(model => model.existingcustomer)             </div>         </div>          <div id="havecnnornot" class="form-group @(existingcustomerflag && doyouhavecnnflag ? "" : "hidden")">             @html.labelfor(model => model.doyouhavecnnnumber, htmlattributes: new { @class = "control-label col-md-2" })             <div>                 <label class="radio-inline">@html.radiobuttonfor(model => model.doyouhavecnnnumber, true, new { id = "doyouhavecnnnumber_true" }) yes</label>                 <label class="radio-inline">@html.radiobuttonfor(model => model.doyouhavecnnnumber, false, new { id = "doyouhavecnnnumber_false" }) no</label>                 @html.validationmessagefor(model => model.doyouhavecnnnumber)             </div>         </div>      <div id="havecnn" class="row form-group clearfix">         <div class="span4">             @html.labelfor(model => model.customerconfirmationnumber, htmlattributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @html.editorfor(model => model.customerconfirmationnumber, new { htmlattributes = new { @class = "form-control" } })                 @html.validationmessagefor(model => model.customerconfirmationnumber, "", new { @class = "text-danger" })             </div>         </div>     </div>      <div id="donthavecnn" class="row form-group clearfix">         <div class="span4">             @html.labelfor(model => model.reasonfornothaveccn, htmlattributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @html.editorfor(model => model.reasonfornothaveccn, new { htmlattributes = new { @class = "form-control" } })                 @html.validationmessagefor(model => model.reasonfornothaveccn, "", new { @class = "text-danger" })             </div>         </div>     </div>          <div class="form-group">             <div class="col-md-offset-2 col-md-10">                 <input type="submit" value="create" class="btn btn-default" />             </div>         </div>     </div> }  <div>     @html.actionlink("back list", "index") </div>  @section scripts {     @scripts.render("~/bundles/jsval")     <script>         (function ($) {             $(function () {                  $("#existingcustomerornot").on("click", "input", function () {                     $("#havecnnornot").toggleclass("hidden", $(this).val() === "false");                 });                  $("#havecnnornot").on("click", "input", function () {                     $("#havecnn").toggleclass("hidden", $(this).val() === "false");                 });              });          })(jquery);     </script> } 

based on description of logic, [requiredif] validation attributes first need changed.

both customerconfirmationnumber , reasonfornothaveccn dependent on doyouhavecnnnumber, attributes needs be

[requiredif("doyouhavecnnnumber", true, errormessage = "enter ccn number")] public string customerconfirmationnumber { get; set; } 

and

[requiredif("doyouhavecnnnumber", false, errormessage = "provide reason why don't have ccn.")] public string reasonfornothaveccn { get; set; } 

then in view, give groups of radio buttons class name (the id attributes not required)

// note should not <label> element (add styles appropriate) <span>@html.displaynamefor(model => model.existingcustomer)</span> <div id="existingcustomerornot" class="span4">     <label class="radio-inline">         @html.radiobuttonfor(model => model.existingcustomer, true, new { @class= "existingcustomer" })         <span>yes</span>     </label>     <label class="radio-inline">         @html.radiobuttonfor(model => model.existingcustomer, false, new { @class = "existingcustomer" })         <span>no</span>     </label>     @html.validationmessagefor(model => model.existingcustomer) </div> 

ditto doyouhavecnnnumber

.... <label class="radio-inline">     @html.radiobuttonfor(model => model.doyouhavecnnnumber, true, new { @class = "doyouhavecnnnumber" })     <span>yes</span> </label> .... 

then scripts become

var hascnn = $('#havecnnornot'); var cnn = $('#havecnn'); var nocnnreason = $('#donthavecnn');  $('.existingcustomer').change(function() {     var iscustomer = $('.existingcustomer:checked').val() === 'true';     if (iscustomer) {         hascnn.show();         $('.doyouhavecnnnumber:first').trigger('change');     } else {         hascnn.hide()         cnn.hide();         nocnnreason.hide();     } })  $('.doyouhavecnnnumber').change(function() {     var hascnnvalue = $('.doyouhavecnnnumber:checked').val();     if (hascnnvalue) {         if (hascnnvalue === 'true') {             cnn.show();             nocnnreason.hide();         } else {             cnn.hide();             nocnnreason.show();         }     } }); 

refer this dotnetfiddle working example includes additional properties in view model determining should visible in view , includes surrounding <div> element last 3 controls simplify script.