Question

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

ViewModel

  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');



    }
},

Answer 1

您可以通过多种方式解决此问题，例如：

JavaScript

zmm

在您的视图中添加以下代码：

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');
    }
}

MVC 5-基于viewmodel属性值的复选框和条件CSS

1 个答案: