2016-08-16 3 views
3

Я использую html-хелперные поля ниже, моя проблема. Мне нужно, чтобы эти элементы hidden не были скрыты при установке флажка.MVC html helpers change hiddenfor attributes

@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) 

вот мой JQuery код:

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

, конечно, это не работает .. как я могу добиться этого?

ответ

1

Ваш генератор вводит type="hidden", который всегда скрыт. Метод jQuery.show() для переключения отображения элементов стилизованных с display:none; и его изменения, чтобы это display:block;

Вы можете сделать это, изменив type атрибут

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

или путем ввода type="text" и укладка его как скрытый

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

со следующими CSS

#myHiddenProperty { 
    display: none; 
} 

, а затем ваш оригинальный скрипт будет работать.

Я подозреваю, однако, что вы хотите, чтобы переключить видимость назад, если флажок затем снят, в этом случае вы должны иметь else блок

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

Side Примечание: ваш используя ужасный хак для того, чтобы сделать вы установите флажок привязать к свойству nullable bool (путем изменения атрибута name), а ваш label даже не работает как label (нажатие на него не будет переключать checkbox). Я рекомендую вам использовать модель представления с

public bool Tadilatmi { get; set; } 

и с точки зрения просто использовать

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

и измените сценарий (который является более эффективным)

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

Ваш myHiddenProperty свойство может затем укажите foolproof[RequiredIfTrue("Tadilatmi")] или аналогичный условный атрибут проверки.

Смежные вопросы