Удалить атрибуты при загрузке страницы и вкл.

Question

Как удалить атрибуты и «вычеркнуть» текстовое поле на основе значения раскрывающегося списка при изменении выбора страницы и выпадающего списка? Я пробовал следующие советы here и here, но он только кажется, что работает над выпадающим списком. В Visual Studio или на консоли Chrome ошибки не отображаются.

View имеет выпадающий список, который загружается с сохраненным выбором пользователя, и текстовое поле становится недоступным только после изменения выбора выпадающего списка и изменения обратно, когда исходное значение выпадающего значения также должно первоначально загружать текстовое поле как недоступное , Другими словами, текстовое поле должно быть недоступен в каждой точке, где выпадающий значение == 1, но следующее, кажется, не делают это:

<div class="col-md-12" style="clear: left;"> 
    <label for="preferenceId" class="req">Preference</label> 
    <div class="col-xs-8 no-left"> 
     @Html.DropDownListFor(m => m.PreferenceTypeID, StaticCache.GetPreferenceTypes(), new { @class = "form-control", data_parsley_required = "true" }) 
    </div> 
    <div class="col-xs-4 no-right"> 
     <div id="customAmount"> 
      @Html.TextBoxFor(m => m.PreferenceCustomAmount, new { @class = "form-control" }) 
     </div> 
    </div> 
</div> 

@section Scripts{ 
    <script> 
    $(function() { 
     if ($("#PreferenceTypeID").val() != 1) { 
      $("#PreferenceCustomAmount").hide(); 
     } else { 
      $("#PreferenceCustomAmount").show(); 
     } 
    }); 
    $("#PreferenceTypeID").change(function() { 
     if ($("#PreferenceTypeID").val() == 1) { 
      $("#PreferenceCustomAmount").attr("disabled", "disabled"); 
     } else { 
      $("#PreferenceCustomAmount").removeAttr("disabled", "disabled"); 
     } 
    }); 
    </script> 
} 

Answer 1

Другими словами, текстовое поле должно быть недоступен в каждой точке, где выпадающее значение == 1

Вам будет лучше запускать .change() при загрузке. Используйте команду .prop() для добавления/удаления свойств элемента. Взгляните на приведенный ниже код.

$(function() { 
 

 
    var $amountInput = $("#PreferenceCustomAmount"); 
 
    $("#PreferenceTypeID").change(function() { 
 
     if (this.value == 1) { 
 
      $amountInput.prop("disabled", true); 
 
     } else { 
 
      $amountInput.prop("disabled", false); 
 
     } 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12" style="clear: left;"> 
 
    <label for="preferenceId" class="req">Preference</label> 
 
    <div class="col-xs-8 no-left"> 
 
     <select id="PreferenceTypeID"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
      <option value="4">4</option> 
 
     </select> 
 
    </div> 
 
    <div class="col-xs-4 no-right"> 
 
     <div id="customAmount"> 
 
      <input type="text" id="PreferenceCustomAmount" /> 
 
     </div> 
 
    </div> 
 
</div>