Нажмите на ярлык для отображения texbox

Question

Я пытаюсь создать надпись на верхней части страницы, которую пользователи могут щелкнуть, которая скроет ярлык и текстовое поле. Однако я не могу заставить его работать.

код Razor:

<div class="form-group"> 
    <div class="col-md-10"> 
     @Html.DisplayFor(model => model.Name, new { id = "Name" }) 
     @Html.EditorFor(model => model.Name, new {htmlAttributes = new {@class = "form-control", id = "NameTextBox"}}) 
     @Html.ValidationMessageFor(model => model.Name, "", new { id = "NameTexBoxValidator" }) 
    </div> 
</div> 

JQuery:

$("#Name").click(function setCompleteStatus() { 
    if ($("#Name").is(":visible")) { 
     $("#NameTextBox").hide(); 
    } else { 
     $("#Name").show(); 
    } 
}); 

Answer 1

Я изменил @Html.DisplayFor(model => model.Name, new { id = "Name" }) к @Html.Label(Model.Name, new { id = "Name" }) и ему работал.

Answer 2

Это не так ясно, что код, но я могу дать ему попробовать, этот код будет скрыть метку OnClick и показать TextBox как вам спросил.

$("#Name").click(function() { 
 
    if ($("#Name").is(":visible")) { 
 
     $("#NameTextBox").show(); 
 
     $("#Name").hide(); 
 
    } 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <label id="Name" for="male">Male</label> 
 
    <input id="NameTextBox" type="text" style="display:none;"> 
 
</form>

Answer 3

Попробуйте это,

$("#Name").click(function(){ 
    if ($("#Name").is(":visible")) { 
     $("#NameTextBox").show(); 
     $("#Name").hide(); 
    } else { // I'd added this else block for discussion purposes only 
     $("#NameTextBox").hide(); 
     $("#Name").show(); 
    } 
}); 

Это покажет текстовое поле и скрыть метку по щелчку этикетке. части иначе недостижим, хотя, потому что после того, как метка была спрятана, нет никакого способа, чтобы вызвать это событие еще раз (на основании данного кода)

Edit:

@Html.ValidationMessageFor(model => model.Name, "", new { id = "NameTexBoxValidator" })