Unable to get VisibleDependsOn working

[mmunnis]

I've been unable to get VisibleDependsOn working in conjunction with a Checkbox.

Code:

<div class="row clearfix">
   <div class="col-md-3 column">
     <div class="form-group">
       @Html.Bootstrap().LabelFor(model => model.CapitalAsset)
       <div class="checkbox-list">
         <label>
           @Html.Bootstrap().CheckBoxFor(model => model.CapitalAsset)
         </label>
       </div>
     </div>
   </div>
   <div class="col-md-3 column">
     @f.FormGroup().VisibleDependsOn(model => model.CapitalAsset, "checked").TextBoxFor(model => model.CapitalAssetNumber).ShowValidationMessage(true)
   </div>
   <div class="col-md-3 column">
   </div>
   <div class="col-md-3 column">
   </div>
</div>

I've also tried: @f.FormGroup().VisibleDependsOn(model => model.CapitalAsset, "true").TextBoxFor(model => model.CapitalAssetNumber).ShowValidationMessage(true) I thought I was using this correctly, but maybe not. On a side note, I have included the twitterbootstrapmvc js file, and checked to make sure it was being loaded.

Thanks for your assistance. Mike

[DmitryEfimenko]

Please show me what html is rendered by

@Html.Bootstrap().CheckBoxFor(model => model.CapitalAsset)

and

@f.FormGroup().VisibleDependsOn(model => model.CapitalAsset, "checked").TextBoxFor(model => model.CapitalAssetNumber).ShowValidationMessage(true)

[mmunnis]

Render as:

<div class="form-group">
  <label for="CapitalAsset">Capital asset<span class="required">*</span> </label>
  <div class="checkbox-list">
    <label>
      <div class="checker" id="uniform-CapitalAsset">
        <span class="checked"><input data-val="true" data-val-required="'Capital asset' field is required." id="CapitalAsset" name="CapitalAsset" type="checkbox" value="true">
        </span>
      </div>
      <input name="CapitalAsset" type="hidden" value="false">
    </label>
  </div>
</div>

and

<div class=" form-group" data-visible-depends-on="CapitalAsset" data-visible-depends-val="checked">
  <label class="control-label" for="CapitalAssetNumber">Capital asset number<span class="required" style="visibility:hidden;">*</span>
  </label>
  <input class="form-control" data-val="true" data-val-length="'Capital asset number' field must not exceed maximum length of 255." data-val-length-max="255" id="CapitalAssetNumber" name="CapitalAssetNumber" type="text" value=""><span class="field-validation-valid" data-valmsg-for="CapitalAssetNumber" data-valmsg-replace="true"></span>
</div>

Thanks Dmitry

[DmitryEfimenko]

First thing is first, it should be the following:

@f.FormGroup().VisibleDependsOn(model => model.CapitalAsset, "true")

I copy pasted your output into my test project with the correction above in mind, and it worked fine. There must be something else that gets in the way. Are there any javascript errors in the browser console?

[mmunnis]

There was a javascript error in the console. When fixed, the visibility started working. I didn't realize an error in an unrelated function would cause a cascading effect like this, but I guess maybe it makes sense because javascript is interpreted.

Thanks for the assistance.

[DmitryEfimenko]

Glad I could help.