How can I make UI list items disabled

This question already has an answer here:

Disable/enable an input with jQuery? 11 answers

---

There s no disabled attribute for li and ul . Use css property to disable it.Also ul and li are not selectable

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>

---

You May try for this:)

In HTML part:

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

In js Part:

$("#Sloan_input").keyup(function(e) {
    //Prevent <button>'s default action
    e.preventDefault();

    //toggle all the <li> elements selectable-ness
    $("#documents> li").toggleClass("unselectable");

});

In CSS part:

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
   }

---

Hook a EventListener to your <input/> element. If the <input/> it's value changes, change the state of the li items.

链接地址: http://www.djcxy.com/p/23016.html

上一篇: 禁用使用jQuery的文本框？

下一篇: 如何禁用UI列表项目