Как сделать элементы списка пользовательского интерфейса отключенными [дубликаты]

1

Это мой список:

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

Я видел несколько связанных вопросов, но не мог найти решение, любая помощь была бы оценена.

  • 1
    пользователь не сможет выбрать , ul не выбираемый элемент ...
  • 1
    Как пользователь может выбирать из UL? Может быть, нам нужно знать, какой код вы используете, что делает его выбираемым
Теги:

3 ответа

1
Лучший ответ

Нет атрибута 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>
  • 0
    Работал отлично, спасибо!
1

Вы можете попробовать это :)

В части 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;
   }
0

Подключите EventListener к элементу <input/>. Если значение <input/> it изменяется, измените состояние элементов li.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню