Unable to disable `` elements by setting `disable` property to `true`

Question

I'm trying to make the rest of my chat room app disabled while a modal is open. I've been using element.disable = true to disable the buttons and this has worked. I have a ul where each li is the name of a chat room that is clickable and opens up its respective chat room in another container. I'm trying to disable the lis using the same disable.true method. I'm using a for loop to iterate through the array of lis, but it isn't working.

I used console.log to view the variable with the array stored in it (var lis) as well as the console.log(lis.length). The console shows that the array has a length of 5 but returns lis.length as 0.

Would be much appreciated if someone could tell me what I'm doing incorrectly.

HTML:

<div class"home-template" id="home">
  <div class="rooms-container">
    <h1 class="app-title">Bloc Chat</h1>
    <ul id="rooms-list">
      <li class="room-item" id="room-item" ng-repeat="chat in home.chatRooms">
        <a href="#" class="room-link" id="{{ chat.$value }}" data-ng-click="home.getRoomName(chat.$id)">{{ chat.$value }}</a>
      </li>
    </ul>
    <button class="btn btn-warning" id="new-room-button" type="button" ng-click="home.open()">New room</button>
    <button class="btn btn-warning" id="delete-cookies-button" type="button" ng-click="home.deleteCookies()">Delete Cookie for testing</button>
  </div>
  <div class="messages-container">
    <h1 class="current-room" ng-bind="home.activeRoom"></h1>
    <ul class="messages-list">
      <li class="message-bubble" ng-repeat="message in home.messages">
        <div class="username">{{ message.username }}</div>
        <div class="sentAt">{{ message.sentAt }}</div>
        <div class="content">{{ message.content }}</div>
      </li>
    </ul>
  </div>
</div>

JavaScript in a home controller:

home.cookieDisplay = $cookies.get('blocChatCurrentUser');
var modals = document.getElementsByClassName('modal');
var lis = document.getElementsByClassName('room-item');
var newButton = document.getElementById('new-room-button');
var delButton = document.getElementById('delete-cookies-button');
if (modals.length === 0) {
  newButton.disabled = false;
  delButton.disabled = false;
  for (var i = 0; i < lis.length; i++) {
    lis[i].disabled.false;
  }
} else if (modals.length !== 0) {
    newButton.disabled = true;
    delButton.disabled = true;
    for (var i = 0; i < lis.length; i++) {
      // lis[i].setAttribute('display', 'none');
      lis[i].disabled.true;
    }
  }

Here's what my console looks like:

Answer 1

You can't disable the li itself.

You can either disable the anchor tag (a) in it for example like this (refernece):

document.getElementById("tab_c").childNodes[0].onclick = function() {return false;};​

Or you can set pointer-events:noneas it has been done using CSS (reference):

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