Prevent users from clicking by using a CSS class in HTML and JavaScript

,hey there buddy

Can you help me figure out how to prevent click behavior using the CSS class?

I'm unable to add an ID to the HTML element, so I need to use the Class to achieve this.

None of my attempts have been successful so far.

Element and CSS Class that needs to be disabled when clicked:

<label class="inner all disabled reserved my_numbers">
 <span class="p5_effect_tooltip_b top">
     <span class="numero">999999<br><small>pending<br>payment</small></span>
     <span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
 </span>
</label>

Class:

label.inner.all.disabled.reserved.my_numbers

1° First Attempt:

jQuery(document).ready(function() {
    $("#inner.all.disabled.reserved").click(function() {
        return false;
    });
});

2° Second Attempt:

$(document).ready(function() {
    $(".label.inner.all.disabled.reserved").click(function() {
        $("label").off("click");
    });
});

3° Third Attempt:

$(document).ready(function() {
    $("#inner.all.disabled.reserved").click(function() {
        return false;
    });
});

4° Attempt:

$('#inner.all.disabled.reserved.my_numbers').disabled = true

Answer №1

In my experience, utilizing the Event is the most effective approach. By employing .preventDefault(), you can successfully halt the event action.

Here's a practical example:

$(function() {
  function stopClick(e) {
    e.preventDefault();
    console.log(e.target.nodeName + " Click Prevented");
    return false;
  }
  $("label.inner.all.disabled.reserved").click(stopClick).children().click(stopClick);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="inner all disabled reserved my_numbers">
 <span class="p5_effect_tooltip_b top">
     <span class="number">999999<br><small>pending<br>payment</small></span>
     <span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
 </span>
</label>

Answer №2

I made a special point to include the console.log() function so you could see that the click event only works once.

Do you think it was necessary?

$(".inner.all.disabled.reserved").click(function(){
  console.log('This message will not show!');
}).off('click');
.inner.all.disabled.reserved:hover {
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="inner all disabled reserved my_numbers">
 <span class="p5_effect_tooltip_b top">
     <span class="numero">999999<br><small>pending<br>payment</small></span>
     <span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
 </span>
</label>

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

The art of overriding React class methods

I am attempting to implement a class composition in react: class Entity { constructor(props) { super(props); } renderPartial() { return (<div>Entity</div>) } render() { return (<div>header {this.renderPartial()}< ...

Issue encountered while retrieving information from XML file through AJAX

I am facing an issue while using AJAX to fetch data from an external XML file. The error I receive is "Invalid argument" and I am working with IE 8. Below is the code snippet: var xhr; xhr = new XMLHttpRequest(); xhr.open("GET","C:/Users/abc/Desktop/Pr ...

Library for Nodejs that specializes in generating and converting PDF/A files

Is there a library available that can convert/create a PDF/A file? I've been searching for solutions but the existing answers suggest using an external service or provide no response at all. I heard about libraries in other languages like ghostscriptP ...

"Commander.js does not process query strings when used in conjunction with node

I developed a CLI tool using commander.js which has been released on npm. This command-line interface utilizes node-fetch to fetch data from an external API. However, I have received reports from some users stating that the query string in the fetch URL is ...

Is there a way to merge all this data into a single Object?

This particular situation is quite complex. Let's consider the following scenario: I have two JavaScript objects that are fetched via REST calls, using two different callbacks. So, we have: call1() - POST method - parsed JSON to JavaScript object, ...

Where should the logic for the Redux app be implemented for optimal performance?

My react-redux app features an action-creator that filters a list of objects based on a specified title: export const filterItems = (title) => dispatch => { axios.get(`/api/items/?title=${title}`) .then(res => { dispatch({ ...

Vue.JS - Dynamically Displaying Property Values Based on Other Property and Concatenating with

I have a reusable component in Vue.js called DonutChart. <donut-chart :chartName="graphPrefix + 'PerformanceDay'" /> The value of the property graphPrefix is currently set to site1. It is used as part of the identifier for the div id ...

Is it possible to target the initial sibling of a parent element using a CSS selector?

Is there a way to target the <p> element using only the id "Standort" as a constant? Any suggestions on how to accomplish this? <section> <header> <h2 class="licht"><span id="Standort" class="-sitemap-select-item-select ...

Show a delightful notification upon adding an item to the cart using AJAX, focusing on the exact count for a specific item in

Issue: I'm facing a problem where I want to show a JavaScript alert when AJAX is triggered. However, the alert only pops up successfully after I refresh the page. Here's the beginning of the function that activates the JavaScript IF cart items ...

JavaScript functions are not being triggered when the submit button is clicked

I am facing an issue where the form buttons are not triggering functions in my React application. The post request is being made using Axios. Could this be related to the structure of my components? Or perhaps it has something to do with file naming conven ...

Selecting the first child within a table using the first-child

I recently set up a login portal page for three different websites. The layout consists of three separate login portals displayed neatly in two columns within a table named "loginPortals". I am currently working on styling the page using CSS, aiming to enh ...

Modification of a CSS element

The CSS I am working with looks like this: .cls .imageX { float:left; } .cls .imageY { float:right; } It is currently being used on a page in this way: <div class="cls"> <a href="" class="imageX"><img src="left.png"/></a> &l ...

jQuery scripts fail to load upon returning using the back button

Attempting to create a website similar to GitHub using PJAX. The page functions normally when utilizing PJAX links, but encounters issues when the back button is clicked. While the content loads successfully, the jQuery scripts are not ready. To see this ...

Keeping state between navigations in Ionic and AngularJS: A guide

In the process of developing my very first hybrid mobile application using Ionic and AngularJS, I have encountered a challenge that I am currently trying to resolve. The issue at hand involves maintaining the state of the graphical user interface between n ...

"Enhance your viewing experience with VideoJS fullscreen mode and F

While attempting to open an HTML5 video using VideoJS in Fancybox, everything is running smoothly except for one small issue: the fancybox close button is appearing above the video content. When trying to adjust the z-index to a lower value, the close but ...

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

Identifying the class name of SVGAnimatedString

While working on creating an SVG map, I encountered an issue where the functions triggered by hovering over 'g' elements were not functioning as expected. In order to troubleshoot this problem, I decided to check for any issues with the class nam ...

Material UI - Radio buttons do not properly reflect the current state of the value

I'm diving into the world of full stack development and I'm working on a project to enhance my understanding of frontend programming with React JS and Material UI. Specifically, I've created a Dialog component to send data to the backend, bu ...

Utilize array.prototype.reduce() with strings

I'm puzzled about how the reduce operation is carried out on a string. Initially, a new Str instance is created with the desired string as a parameter. Following that, the split method is used to divide the string into an array of strings. A method c ...

How can I monitor and handle JavaScript errors without causing TestCafe tests to fail?

As I begin writing TestCafe tests, a problem arose on our website - a JS error in the console causing test failures. While it was satisfying to catch this issue, it also highlighted the fact that even minor JS errors could lead to test failures and hinder ...