Затенение / отключение текстового поля на основе выделенного текста в раскрывающемся списке - PullRequest
Новая
       8

Затенение / отключение текстового поля на основе выделенного текста в раскрывающемся списке

1 голос
/ 13 марта 2020

Я пытаюсь выделить текстовые поля серым цветом на основе выделенного текста в раскрывающемся списке. У меня есть функция onChange для выпадающего списка, но она, похоже, не работает

My html

@Html.DropDownListFor(model => model.SponsorName, employmentStatuses, "Select Employment Status", new { id = "employmentStatus", @class = "form-control", onchange = "GetSelectedTextValue(this)" })

Текстовое поле, которое должно быть серым если пользователь выбрал, что он безработный 

 <div class="col-sm-3">
    Employer
    <div>
   @Html.EditorFor(model => model.Employer, new { htmlAttributes = new { id = "employer", @class = "form- 
    control" } })@Html.ValidationMessageFor(model => model.Employer, "", new { @class = "text-danger" })
    </div>
  </div>

Мой скрипт для функции onChange 

 <script type="text/javascript">
            function GetSelectedTextValue(ddlEmploymentStatus) {
                var selectedText = ddlEmploymentStatus.options[ddlEmploymentStatus.selectedIndex].innerHTML;
                var selectedValue = ddlEmploymentStatus.value;
                if (selectedText != 'Employed' || selectedText !='Self employed')
                {

                    document.getElementById("employer").disable = 'true';
                    document.getElementById("JobTitle").disable = 'true';

                }
                alert(selectedText);
            }
        </script>

1 Ответ

1 голос
/ 13 марта 2020

В вашем коде есть три основных проблемы.

  • Правильное имя свойства disabled, а не disable.
  • Свойство disabled принимает логическое значение, а не строку.
  • Лог c в условии if имеет недостатки, поскольку оба условия являются взаимоисключающими. Это означает, что вам необходимо инвертировать условие для проверки.

Кроме того, вы не должны использовать встроенные обработчики событий, поскольку они устарели и являются плохой практикой, поскольку они нарушают принцип разделения проблем. Лучше всего незаметно добавлять обработчики событий, например: 

document.querySelector('#employmentStatus').addEventListener('change', function() {
  let selectedText = this.options[this.selectedIndex].innerHTML;
  let isDisabled = !(selectedText == 'Employed' || selectedText == 'Self employed');
  document.querySelector('#employer').disabled = isDisabled;
  document.querySelector('#JobTitle').disabled = isDisabled;
});
<select id="employmentStatus" class="form-control">
  <option value="">Please select...</option>
  <option value="Student">Student</option>
  <option value="Unemployed">Unemployed</option>
  <option value="Employed">Employed</option>
  <option value="Self employed">Self employed</option>
</select>

<div class="col-sm-3">
  Employer
  <div>
    <input type="text" id="employer" class="form-control" disabled="disabled" />
  </div>
</div>
<div class="col-sm-3">
  Job title
  <div>
    <input type="text" id="JobTitle" class="form-control" disabled="disabled"  />
  </div>
</div>

Последнее, что следует отметить, заключается в том, что регистр атрибутов id является непоследовательным и должен быть исправлен.

...