Click here to Skip to main content
15,116,253 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want the text box to be displayed when the checkbox is active, so I wrote the following code in the razor


What I have tried:

<div class="form-group form-check">
          <label class="form-check-label">
              <input class="form-check-input" asp-for="OwnerStatus" /> @Html.DisplayNameFor(model => model.OwnerStatus)
          </label>
      </div>
      <div class="form-group" id="owner-container" style="display:none;">
          <label asp-for="OwnerName" class="control-label"></label>
          <input asp-for="OwnerName" class="form-control" />
          @*<span asp-validation-for="OwnerName" class="text-danger"></span>*@
      </div>



$(document).ready(function () {
$('#OwnerStatus').change(function (e) {
var isChecked = $(e.currentTarget).is(':checked');
changeOwnerNameStatus(isChecked);
});
});
Posted
Updated 10-Jun-20 0:44am

1 solution

You haven't explained what's wrong with your code. But something like this should work:
HTML
<div class="form-group form-check">
    <label class="form-check-label">
        <input class="form-check-input" asp-for="OwnerStatus" data-toggle="collapse-group" data-target="#owner-container" /> 
        @Html.DisplayNameFor(model => model.OwnerStatus)
    </label>
</div>
<div class="form-group d-none" id="owner-container">
    <label asp-for="OwnerName" class="control-label"></label>
    <input asp-for="OwnerName" class="form-control" />
</div>
JavaScript
$(function(){
    var toggleGroup = function(input){
        var target = $(input.getAttribute("data-target"));
        target.toggleClass("d-none", !input.checked);
    };
    
    // Toggle the group when the checkbox is clicked:
    $(document).on("click", "input:checkbox[data-toggle='collapse-group']", function(){ toggleGroup(this) });
    
    // Handle the initial state of the checkbox:
    $("input:checkbox[data-toggle='collapse-group']").each(function(){ toggleGroup(this); });
});
Demo[^]
   
Comments
Member 14615938 15-Jun-20 6:03am
   
veryyyyy good

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900