asp.net-mvc - MVC html 帮助程序更改 hiddenfor 属性

Question

我在下面使用 html 帮助程序字段，我的问题是我需要让这些 hiddenfor 元素在选中复选框时不隐藏。

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

当然不行..我怎样才能做到这一点？

Answer 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 block

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

旁注:您使用了一个可怕的 hack 来让您的复选框绑定(bind)到 nullable bool 属性(通过更改 name 属性)和您的 label 甚至不能用作标签(点击它不会切换复选框)。我建议您使用 View 模型

 public bool Tadilatmi { get; set; }

并在 View 中简单地使用

@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")] 或类似的条件验证属性。