Display textbox when checkbox checked in ASP.NET core 3

Question

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 9-Jun-20 20:27pm

Member 14615938

Updated 9-Jun-20 23:44pm

Add a Solution

1 solution

Add a Solution

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

Richard Deeming · Accepted Answer · 2020-06-09T23:45:00

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[^]

Display textbox when checkbox checked in ASP.NET core 3

1 solution

Solution 1

Add your solution here

Preview 0

Display textbox when checkbox checked in ASP.NET core 3

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us