MVC 5 - флажок и условный CSS, основанный на значении свойства в модели представления

Question

У меня есть частичное представление MVC 5, которое передается в модели представления. В viewModel есть свойство "IsActive" ... Основываясь на этом свойстве, я хотел бы добавить или удалить hdml-атрибут @disabled = "disabled" для представления ввода текста. У меня это работает после начальной загрузки с 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>

CheckBox

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

JQuery, который применяет CSS, если флажок установлен / снят

 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

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>