Click here to Skip to main content
14,644,700 members
Rate this:
Please Sign up or sign in to vote.
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 9-Jun-20 23:44pm

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

You haven't explained what's wrong with your code. But something like this should work:
<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>
$(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, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100