如何禁用 UI 列表项[重复]

Posted 2023-02-22

【中文标题】如何禁用 UI 列表项[重复]

【英文标题】：How can I make UI list items disabled [duplicate]

【发布时间】：2018-04-15 06:47:05

【问题描述】：

这是我的清单：

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

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

【问题讨论】：

用户将无法选择，ul 不是可选元素...

用户如何从 UL 中进行选择？也许我们需要知道您使用的是什么代码使其可选择

【参考方案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>

【讨论】：

完美运行，谢谢！

【参考方案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部分：

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

【参考方案3】：

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