Question

我以编程方式填充了JSP页面和下拉列表。现在，在某些情况下，应该禁用下拉列表，但用户应该仍然可以看到它的所有元素，但实际上无法选择它，如下所示：https://jsfiddle.net/nenadbulatovic/6g4pmmpv/1/

<select>
  <option value="Select...">Select...</option>
  <option disabled value="volvo">Volvo</option>
  <option disabled value="saab">Saab</option>
  <option disabled value="mercedes">Mercedes</option>
  <option disabled value="audi">Audi</option>
</select>

显然，因为有条件我不能放下禁用下一个选项。

这是我需要的代码（下拉列表）的实际部分。

<div class="row-fluid">
    <div class="span3">
      <label><%=Constants.REQUIRED%>&nbsp;<c:out value="${requestScope.RESOURCES_MAP.SITE_PARENT}"/>:</label>
        <select class="selectpicker" data-width="100px" id="siteParentNameSelect" style="width:250px;margin-bottom:0px;">
          <option value=''>${requestScope.RESOURCES_MAP[SELECT]}</option>
          <c:forEach var="siteParentName" items="${siteParentNameList}">
            <option value="${(pageContext.request, siteParentName.id)}" ${siteParentName.id == '0' ? 'selected = "selected" ' : ''}> ${siteParentName.name}</option>
          </c:forEach>
        </select>
    </div>
  </div>

我应检查是否有某些条件，例如“enabledFlag”，然后检查是否为true / false启用/禁用其元素以供选择。

编辑：我只能使用JSP / JSTL，JavaScript，JQuery

Answer 1

您应该使用Angular ng-disabled指令：

<select>
  <option value="Select...">Select...</option>
  <option ng-disabled=flag value="volvo">Volvo</option>
  <option ng-disabled=flag value="saab">Saab</option>
  <option ng-disabled=flag value="mercedes">Mercedes</option>
  <option ng-disabled=flag value="audi">Audi</option>
</select>

了解更多信息： https://www.w3schools.com/angular/ng_ng-disabled.asp

修改

不幸的是，我对JSTL不是很熟悉，但是你不能这样做吗？

<option value="mercedes" <c:if test="${flag}"><c:out value="disabled='disabled'"/></c:if>">

下拉列表显示所有元素但禁用以供选择

1 个答案: