Question

这是我的清单：

<ul class="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>

我想要禁用列表中的项目（用户无法选择），直到此字段具有值：

<input type="text" class="Sloan_input rr" id="Sloan_input" placeholder="Enter Order" />

我看到了一些相关问题，但无法找到解决方案，我们将不胜感激。

Answer 1

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>

Answer 2

你可以试试这个：）

在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 Part：

$("#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;
   }

Answer 3

将EventListener挂钩到<input/>元素。如果<input/>的值发生变化，请更改li项的状态。

如何禁用UI列表项

3 个答案: