Это мой список:
<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" />
Я видел несколько связанных вопросов, но не мог найти решение, любая помощь была бы оценена.
Нет атрибута disabled для 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> 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/>
it изменяется, измените состояние элементов li
.
ul
не выбираемый элемент ...