JavaScript/HTML-如何禁用列表中的一项

Question

我必须禁用上述项目

  <li style="background-color: #CCCCCC" disabled="disabled">As your company</li>

正如您所看到的，我尝试使用禁用属性，但是当我单击此项目时，仍然会调用名为 onclick 的函数。

<fieldset style="display: inline" >
    <div class="ui-grid-a" style="display: inline">
        <label class="text-ligh ui-block-a">Post as: </label>
        <label class="link toggle-post ui-block-b" >Yourself</label>
    </div>
    %{--<div data-role="collapsible"  data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right">--}%
        %{--<h3 id="listHeader">Yourself</h3>--}%
        <ul class="ul-post" data-role="listview" data-inset="false" onclick="changeHeader(event);" style="width: 240%; display:none">
            <li data-postas="0">Yourself</li>
            <g:if test="${companyList?.size() > 1}">
                <li style="background-color: #CCCCCC" disabled="disabled">As your company</li>
                <g:each var="company" in="${companyList}">
                    <li data-postas="1" value="${company?.id}" id="${company?.companyname}" data-company="${company?.id}">${company?.companyname}</li>
                </g:each>
            </g:if>
            <g:else>
                <input type="hidden" value="${companyList[0].id}" name="company"/>
            </g:else>

        </ul>
    </div>
</fieldset>

Answer 1

disabled属性仅在交互式表单元素上有效( <input /> 、 <select> 、 <textarea> 等)； “禁用”<li>从触发分配的点击事件中，您必须过滤掉“已禁用”<li>点击处理程序中的元素:

$('li').on('click', function() {
  if ($(this).is(':not([data-interactivity="disabled"])')) {
    console.log(this.textContent);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>This element is click-able.</li>
  <li data-interactivity="disabled">This element is not.</li>
</ul>

或者在附加点击处理程序之前从 jQuery 集合中获取:

$('li').not('[data-interactivity="disabled"]').on('click', function() {
  console.log(this.textContent);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>This element is click-able.</li>
  <li data-interactivity="disabled">This element is not.</li>
</ul>

引用文献:

JavaScript:
• Node.textContent .
• Using data-* attributes .
• jQuery:
  • not() .
  • :not() .
  • on() .