根据下拉菜单中的选定文本将文本框灰显/禁用

Question

我正在尝试根据下拉列表中的选定文本将文本框显示为灰色。我为下拉菜单提供了一个onChange函数，但它似乎没有解决问题的技巧

我的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>

Answer 1

您的代码中存在三个主要问题。首先，正确的属性名称是disabled，而不是disable。其次，该属性接受布尔值，而不是字符串。最后，if条件中的逻辑存在缺陷，因为这两个条件是互斥的，这不是应该如何工作的。您需要将!=更改为==并反转支票。

function GetSelectedTextValue(ddlEmploymentStatus) {
  var selectedText = ddlEmploymentStatus.options[ddlEmploymentStatus.selectedIndex].innerHTML;
  var selectedValue = ddlEmploymentStatus.value;

  let isDisabled = !(selectedText == 'Employed' || selectedText == 'Self employed');
  document.getElementById("employer").disabled = isDisabled;
  document.getElementById("JobTitle").disabled = isDisabled;
}

<select id="employmentStatus" class="form-control" onchange="GetSelectedTextValue(this)">
  <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" />
  </div>
</div>
<div class="col-sm-3">
  Job title
  <div>
    <input type="text" id="JobTitle" class="form-control" />
  </div>
</div>