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 块

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

旁注：您使用了一个糟糕的 hack 来让您的复选框绑定到 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")] 或类似的条件验证属性。

MVC html 帮助程序更改 hiddenfor 属性

MVC html helpers change hiddenfor attributes

asp.net-mvc

html-helper