我必须禁用上述项目
<li style="background-color: #CCCCCC" disabled="disabled">As your company</li>
如您所见,我尝试使用Disabled属性,但是当我单击此项时,仍会调用名为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>
最佳答案
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>
参考文献:
Node.textContent
。 data-*
attributes。 not()
。 :not()
。 on()
。