如何禁用UI列表项目
这个问题在这里已经有了答案：
没有li和ul禁用属性。 使用CSS属性来禁用它。另外ul和li是不可选的
document.getElementById("Sloan_input").addEventListener('keyup', function(event) {
if (this.value !== "") {
document.getElementsByClassName('documents')[0].classList.remove('disableEle')
} else {
document.getElementsByClassName('documents')[0].classList.add('disableEle')
}
}).disableEle {
pointer-events: null;
cursor: no-drop
}<input type="text" class="Sloan_input rr" id="Sloan_input" placeholder="Enter Order" />
<ul class="documents disableEle">
<li class="list_title">
<div class="Srequired">NEW</div>
</li>
<li class="doc_price">1</li>
<li class=" doc_price">2</li>
<li class=" list_title dark_green ">
<div class="Sother ">OLD</div>
</li>
<li class="doc_choice dark_green ">3</li>
<li class="doc_choice dark_green ">4</li>
<li class="doc_price ">No Doc</li>
</ul>你可以试试这:)
在HTML部分中：
<input type="text" class="Sloan_input rr" id="Sloan_input" placeholder="Enter Order" />
<ul id="documents">
<li class="list_title"><div class="Srequired">NEW</div></li>
<li class="doc_price>1</li>
<li class="doc_price>2</li>
<li class="list_title dark_green"><div class="Sother">OLD</div></li>
<li class="doc_choice dark_green">3</li>
<li class="doc_choice dark_green">4</li>
<li class="doc_price">No Doc</li>
</ul>
在js部分：
$("#Sloan_input").keyup(function(e) {
//Prevent <button>'s default action
e.preventDefault();
//toggle all the <li> elements selectable-ness
$("#documents> li").toggleClass("unselectable");
});
在CSS部分：
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
将EventListener挂钩到<input/>元素。 如果<input/>它的值发生变化，请更改li项目的状态。