如何禁用輸入文本框中已選擇的搜索欄列表

Question

這是我的HTML：

<div class="container">
  <div class="card">
    <div class="col-md-12" style="padding-top: 10px;padding-bottom: 10px;">
      <div class="form-group">
        <input type="text" id="medicineSearchBar" class="form-control" placeholder="Search...">
      </div>
      <ul class="list-group" id="result"></ul>
      <ul style="width:100%; max-height:300px; overflow-y: scroll;" id="li-psearch" class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation" class="divider-search"></li>
      </ul>
    </div>
  </div>
</div>

如何禁用輸入文本框中已選擇的搜索欄列表？ 我沒有使用任何提交按鈕，應該點擊搜索欄上的文本輸入。

數據來自JSON文件。

Answer 1

1，在您的CSS中創建一個禁用類：

.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}

2，為您的li設置jquery監聽器事件：

$(".card").on("click", "li.divider-search", function(){
$(this).addClass("disabled");
});