What is the best way to disable list items in a UI?

Check out my assortment:

<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'm looking to disable the list items until a specific field is filled with content:

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

While I've come across similar queries, a solution still eludes me. Any assistance would be warmly welcomed.

javascript

Answer №1

There is no disabled attribute for li and ul. Use CSS property to disable it. Additionally, ul and li elements 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>

Answer №2

Feel free to give this a shot:)

For the HTML section:

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

And in the JavaScript part:

$("#Sloan_input").keyup(function(e) {
    //Prevent <button>'s default action
    e.preventDefault();

    //toggle all the <li> elements selectable-ness
    $("#documents> li").toggleClass("unselectable");

});

Lastly, for the CSS section:

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

Answer №3

Add an EventListener to the <input/> element. Whenever the value of the <input/> changes, update the status of the li items accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My code gets disrupted when I use classes instead of IDs

My HTML code works fine when I use IDs and select them in my javascript with getElementByID. However, if I switch to using classes instead of IDs, my code stops working. I want to switch to using classes because I am collaborating on a project with someon ...

javascripthtml

Smooth carousel navigating through dots

I am currently using the slick carousel from http://kenwheeler.github.io/slick, and I am looking for a way to limit the number of dots to 8 even when there are more than 8 slides. The navigation dots should include arrows on the left and right sides to in ...

javascriptjquerycsscarouselslick.js

Are you experiencing issues with the cipher update when using the crypto library?

When using the crypto module for string encryption and the passed string is not 16 bytes, I expected the cipher.update() function to automatically add padding and create a 16-byte string. However, during debugging, cipher.update returned an empty string. I ...

javascriptjavanode.jsencryptioncryptojs

What are some ways to direct users from one page to another without relying on server-side programming?

Is there a way to create a redirect page using jQuery or JavaScript? What is the process of writing client-side scripting code to redirect the browser from one page (page1) to another page (page n)? ...

javascriptjquery

What is the best way to send an array to a modal?

Utilizing Axios for retrieving a list of countries from a REST API, I have implemented modals with each displaying the name and flag of a country. Upon clicking on any country name, the console will log the selected country. I am looking to pass the last ...

javascriptvue.js

Is there a way to insert data with a specific key into an array of objects without losing existing JSON data in Node.js?

I came across an object structured like this : { "mark": [ { "id":1, "name": "mark", "age":26 }, { "id":2, "name": "mark", " ...

javascriptnode.jsjson

JS: delay onClick function execution until a page refresh occurs

Currently, I am working on a WordPress site that involves a form submission process. Upon successful submission, a new post is created. After the user submits the form, I have implemented JavaScript to prompt them to share a tweet with dynamically prepopu ...

javascriptformstwitter

Display the matrix in a semi-spiral pattern

I am working with a 3 by 5 matrix, filled with numbers from 1, presented as follows: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 The task is to print the values in a half-spiral order, starting from the bottom left vertically: 11 6 1 5 10 15 12 7 2 4 9 ...

javascriptarraysmatrix

bulk purchase discount with HTML/JavaScript/PHP

I am looking to add a slider feature to my "Prices" page in order to provide customers with an instant quote based on the quantity they select. The slider should range from 1 to 500 or even up to 1000, but having an input box for customers to enter the qu ...

javascriptphphtmlcss

Can you provide instructions on how to replace the icon within the TablePagination element in MUI?

I'm currently working on a React project where I've implemented the MUI component known as TablePagination This TablePagination component is situated within the Table component, just like in the image provided below. https://i.stack.imgur.com/B ...

javascriptreactjssvgmaterial-ui

Troubleshooting Angular JS loading problems

I'm attempting to implement the Angular-Spinner in my project: Specifically, I want to use it with http.get calls. This is what I have so far: Within controllers: $scope.loading = true; $http.get('js/data/test.json').success(function(resu ...

javascripthtmlangularjs

Warnings from Webpack may appear while running the Next.js development server

Encountering these warnings when running npm dev: <w> [webpack.cache.PackFileCacheStrategy] Restoring pack from /Users/pdeva/code/monorepo/web/app/.next/cache/webpack/client-development.pack failed: TypeError: Cannot read properties of undefined (rea ...

javascriptnode.jswebpacknext.jsnext.js13

I keep receiving the same error (ENOENT) for all npm commands

Currently, I am running windows 8.1 x64 with all the latest updates installed. I encountered an error while using nodejs version 8.9.1 when running the command "npm -v". As a result, I decided to uninstall this version and switch to version 8.9.3. However ...

javascriptnode.jswindowsnpm

Exploring the Angular Checkbox n-Change - is it really all about 'this'?

Looking for a solution with a series of checkboxes: <input type="checkbox" ng-change="??????"> I am trying to figure out how to set $scope.mode.someOtherValue = false when the checkbox is checked. Any ideas on how to extract the checkbox value wi ...

javascriptangularjsangular-uiangularjs-ng-change

Unable to use the .focus() method on a Link component by utilizing references in React Router 4

I am currently working with the Link component in react-router (v4). I have successfully attached a ref to this component and can log the reference. However, when I try to use linkRef.current.focus(), I encounter the following error: linkRef.current.focu ...

javascriptreactjsreact-router-v4

What is the reason behind V8's perplexing error notification?

When running this code on Chrome or Node (v8), an error message is displayed: Uncaught TypeError: f is not iterable function f(){} f(...undefined); Why is such an ambiguous error message generated in this case? Does it really have nothing to do with ...

javascriptnode.jsgoogle-chromev8

Why does my Angular service throw an error stating "undefined is not a function" when passing my function as an argument?

I am currently working on implementing factory and two constructor patterns in Angular. My goal is to convert the factory into an Angular service. Below is a simplified version of the code I am working with: function processFactory () { // some code ...

javascriptangularjs

Leveraging two AJAX requests within a single function

I am working on creating an ajax function to post data that I've retrieved using another ajax function. While I have figured out how to use a callback function, I am struggling with passing the data from one function to the other. Here is what I have ...

javascriptjqueryajaxcallback

Variety of properties determined by a "type" prop, expanding variations based on a value from the interface

I am trying to enhance a type based on a value from the main interface. If the type == multiline, it will have a specific interface, and if the type == icon, it will have a different type. import React, { memo, useCallback, ReactNode } from 'react&apo ...

javascriptreactjstypescripttypescript-typings

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

Currently, I am facing an issue with a bootstrap modal. There is a button inside the modal which upon clicking should navigate the current component to another component named 'questions'. The problem arises when the new component is loaded, as t ...

javascriptjqueryangularbootstrap-4bootstrap-modal