Question

我正在使用下面的html帮助字段，我的问题是我需要在复选框被选中时将这些隐藏的元素隐藏起来。

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

旁注：你使用了一个糟糕的黑客，以便让你复选框绑定到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属性

1 个答案: