How can I make UI list items disabled

Question

This is my list:

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

I want the items on the list to be disabled (the user won't be able to select) until this filed has a value:

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

I saw a few related questions but couldn't find a solution, any help would be appreciated.

_the user won't be able to select_ , `ul` isn't a selectable element... — Zakaria Acharki, Nov 02 '17 at 16:49
How is a user able to select from a UL? Maybe we need to know what code you are using what makes it selectable — epascarello, Nov 02 '17 at 16:50

score 1 · Accepted Answer · answered Nov 02 '17 at 16:55

There s no disabled attribute for li and ul. Use css property to disable it.Also ul and li are not selectable

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>

Worked perfectly, thank you! – user3378165 Nov 06 '17 at 10:55 — user3378165, Nov 06 '17 at 10:55

score 1 · Answer 2 · answered Nov 02 '17 at 16:58

You May try for this:)

In HTML part:

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

In 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");

});

In CSS part:

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
   }

score 0 · Answer 3 · answered Nov 02 '17 at 16:52

0

Hook a EventListener to your <input/> element. If the <input/> it's value changes, change the state of the li items.

answered Nov 02 '17 at 16:52

tuuttuut

417
6
21

How can I make UI list items disabled

3 Answers3