MVC 5 - 基于视图模型属性值的复选框和条件 CSS答案

【问题标题】：MVC 5 - Checkbox and Conditional CSS based on value of property on viewmodelMVC 5 - 基于视图模型属性值的复选框和条件 CSS
【发布时间】：2018-08-24 16:17:27
【问题描述】：

我有一个在视图模型中传递的部分 MVC 5 视图。在 viewModel 上有一个“IsActive”属性...基于此属性，我想为文本输入视图添加或删除 @disabled = "disabled" html 属性。我在使用 JQuery 初始加载后让它工作，但似乎无法有条件地将它应用于 init。

视图模型

  public class InfoViewModel
  {
    public bool IsActive { get; set; }
    public string HouseholdName { get; set; }
    public string LastName { get; set; }
    bool ReadOnly { get; set; }

}

局部视图

 <div class="row">
  <div class="col-md-5">
   <div class="form-group">
    @Html.LabelFor(model => model.HouseholdName, new {@class = "control-label"}):
    @Html.TextBoxFor(model => model.HouseholdName)
    @Html.ValidationMessageFor(model => model.HouseholdName, "", new { @class = "text-danger" })
</div>
<div class="form-group">
    @Html.LabelFor(model => model.LastName, new { @class = "control-label" }):
    @Html.TextBoxFor(model => model.LastName)
    @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>

复选框

 <div class="controls">
  <label class="checkbox-inline">
       @Html.CheckBoxFor(model => model.IsActive)
    @Html.DisplayNameFor(model => model.IsActive)
    </label>
 </div>

选中/取消选中复选框时应用 CSS 的 JQuery

 activeChanged: function(e) {

        //Checkbox ID
    if ($("#InfoViewModel_IsActive").is(':unchecked')) {

        //Text inputs** 
        $("#InfoViewModel_HouseholdName").prop("readonly", true);
        $('#InfoViewModel_HouseholdName').css('background-color', '#D3D3D3');
        $("#InfoViewModel_LastName").prop("readonly", true);
        $('#InfoViewModel_LastName').css('background-color', '#D3D3D3');


    } else {
        $("#InfoViewModel_HouseholdName").prop("readonly", false);
        $('#InfoViewModel_HouseholdName').css('background-color', '#FFF');

        $("#InfoViewModel_LastName").prop("readonly", false);
        $("#InfoViewModel_LastName").css('background-color', '#FFF');



    }
},

【问题讨论】：

我不确定我是否理解您的问题中哪些有效，哪些无效-客户端编辑是否有效（根据您使用 jQuery 选中/取消选中复选框来切换只读）已发布）但页面的初始加载并未通过设置输入的初始禁用属性来反映 IsActive 设置？
您可以使用@{ var attributes = Model.IsActive ? (object)new { @class = "someClass", readonly = "readonly" } : (object)new { @class = "anotherClass"}); }，然后使用@Html.TextBoxFor(model => model.HouseholdName, attributes)（注意最好使用类名而不是内联样式）

标签： jquery asp.net-mvc razor

【解决方案1】：

你可以通过多种方式解决这个问题，例如：

JavaScript

activeChanged: function(e) {
    //Checkbox ID
    if ($("#InfoViewModel_IsActive").is(':unchecked')) {
        activeOrDesactiveProperties(false);
    } else {
        activeOrDesactiveProperties(true);
    }
},

function activeOrDesactiveProperties(isActive) {
    if (!isActive) {
        //Text inputs** 
        $("#InfoViewModel_HouseholdName").prop("readonly", true);
        $('#InfoViewModel_HouseholdName').css('background-color', '#D3D3D3');
        $("#InfoViewModel_LastName").prop("readonly", true);
        $('#InfoViewModel_LastName').css('background-color', '#D3D3D3');
    } else {
        $("#InfoViewModel_HouseholdName").prop("readonly", false);
        $('#InfoViewModel_HouseholdName').css('background-color', '#FFF');

        $("#InfoViewModel_LastName").prop("readonly", false);
        $("#InfoViewModel_LastName").css('background-color', '#FFF');
    }
}

在您看来添加此代码：

<script type="text/javascript">
    activeOrDesactiveProperties(@this.Model.IsActive);
</script>

【讨论】：