MVC html helpers change caché pour les attributs

Question

J'ai utilisé les champs d'aide html ci-dessous, mon problème, j'ai besoin de rendre ces éléments cachéspour pas caché lorsque la case est cochée.

@Html.HorizontalFormFieldFor(model => model.InsaatHizmetBedeli) 
<div class="control-group"> 
    @Html.LabelFor(model => model.tadilatMi, new { @class = "control-label" }) 
    <div class="controls"> 
     @if (!Model.tadilatMi.HasValue) 
     { 
      Model.tadilatMi = false; 
     } 
     @Html.CheckBoxFor(model => model.tadilatMi.Value, new { @Name="tadilatmi" }); 
    </div> 
</div> 
@Html.HiddenFor(model => model.myHiddenProperty) 

ici est mon code jquery:

$("input[name='tadilatmi']").on("change", function() {  
    if ($("input[name='tadilatmi']").is(":checked")) { 
     $("#myHiddenProperty").show() 
    } 
}) 

Bien sûr, il ne travaille pas .. comment puis-je y parvenir?

Answer 1

Vous générez une entrée avec type="hidden" qui est toujours cachée. La méthode jQuery.show() est pour basculer l'affichage des éléments de style avec display:none; et ses changements il à display:block;

Vous pouvez le faire en changeant l'type attribut

if ($("input[name='tadilatmi']").is(":checked")) { 
    $("#myHiddenProperty").attr('type', 'text') 
} 

ou en faisant l'entrée type="text" et le style comme caché

@Html.TextBoxFor(model => model.myHiddenProperty) 

avec les éléments essentiels suivants

#myHiddenProperty { 
    display: none; 
} 

puis votre script original fonctionnera.

Je pense cependant que vous voulez activer la visibilité arrière si la case est alors cochée, dans ce cas, vous devriez avoir un else bloc

if ($("input[name='tadilatmi']").is(":checked")) { 
    $("#myHiddenProperty").show() 
} else { 
    $("#myHiddenProperty").hide() 
} 

note de côté: votre utilisation d'un bidouille terrible pour faire vous checkbox lier à une propriété nullable bool (en chaningant l'attribut name) et votre label ne fonctionne même pas en tant que label (en cliquant dessus il ne bascule pas le checkbox). Je vous recommande d'utiliser un modèle de vue avec

public bool Tadilatmi { get; set; } 

et dans la vue simplement utiliser

@Html.LabelFor(m => m.Tadilatmi , new { @class = "control-label" }) 
<div class="controls"> 
    @Html.CheckBoxFor(m => m.Tadilatmi); 
</div> 

et changer le script (qui est plus efficace)

var hiddenElement = $('#myHiddenProperty'); 
$('#tadilatmi').change(function() {  
    if ($(this).is(":checked")) { 
     hiddenElement.show() 
    } else { 
     hiddenElement.hide() 
    } 
}) 

Votre propriété myHiddenProperty pourrait puis inclure un foolproof[RequiredIfTrue("Tadilatmi")] ou un attribut de validation conditionnelle similaire.