Tips for deactivating the double class with jQuery

I need to implement a feature where all classes on a button are disabled if a specific class is present. I attempted to disable all classes, but it seems like I made an error somewhere.

Jquery:

if ($('.lgi_btn_cta_toggle').hasClass('lgi_cta_inactive')) {
$(this).attr("disabled", true);
}

HTML

<button data-action="Hyperlink" class="lgi_btn_cta_add add-sub lgi_btn_cta lgi_cta_inactive clearboth"><span>Hey</span></button>

CSS:

.lgi_btn_cta_remove:after {
  font-family: "MaterialIcons";
  content: "\e14c";
  color: #ffffff;
  font-weight: bold;
  min-width: 43px;
  height: 44px;
  background: #5a9996;
  position: absolute;
  margin-top: -9px;
  margin-left: 17px;
  border-radius: 50px 18px 18px 50px;
  padding-top: 10px !important;

Answer №1

jQuery version 1.6 or lower:

$('.lgi_btn_cta.lgi_cta_inactive').attr('disabled','disabled');

jQuery version higher than 1.6:

$('.lgi_btn_cta.lgi_cta_inactive').prop('disabled', true);

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

Removing an event from Fullcalendar

With the help of a post on StackOverflow, I managed to modify my select: method to prevent users from adding an event on a date before NOW. However, there is a drawback. When a user clicks on an empty time slot and the system displays an alert message, th ...

Cease the continuous reloading of the website during the

Hi there! I have come across a little script that runs when the user clicks on "submit": $(document).ready(function(){ $("form").submit(function(){ var username = $("#username-field").val(); if(username) { $.ajax({ url: &ap ...

What steps should I take to establish an efficient folder organization system for a website utilizing HTML, CSS, and Javascript with Twitter Bootstrap?

After cloning the latest release of Twitter Bootstrap using Git with the command 'git clone git://github.com/twbs/bootstrap.git', I am in the process of creating an HTML/CSS site utilizing Bootstrap. Upon reviewing this answer on Stack Overflow ( ...

Error: The function 'lightBox' is not available on the current object

I encountered an issue while attempting to utilize jQuery.LightBox: Uncaught TypeError: Object [object Object] has no method 'lightBox' For reference, here is a demonstration (recreating a table layout using divs): And just to confirm, the jQu ...

When running `node compile.js`, no combined CSS file is being created

I have finally mastered the art of setting up and executing the "node compile.js" file in the claro theme folder to compile each *.less file into its corresponding *.css file. However, I noticed that the old claro.css file remains unchanged. Is this the in ...

Divi Child Theme Disrupts Wordpress Customizer Functionality

I'm encountering an issue with the interaction between the WordPress customizer and Divi. The customizer functions properly when only Divi is activated, but as soon as I activate a child theme, the customizer stops working. While it appears on the use ...

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

So, besides using Ajax, is there another solution to achieve the same result? Can a font-awesome icon be turned into a button without Ajax? In case you're unfamiliar with what I mean by a font-awesome icon, here's an example: <i id="like1" on ...

Managing the automatic download of a zip file through JQuery - A guide

When working with a REST API and creating a zip file for forced download, the task is to call the API by sending necessary POST data through JQuery to initiate the download. How can this goal be accomplished effectively? ...

` ` Despite entering correct values, the HTML form is still displaying validation errors due to JavaScript. ``

My contact form with validations is functioning well, but I am facing an issue where old errors persist even after correcting them and submitting the form again. Below is a snippet of the document containing the JavaScript code: <form id="contactForm" ...

Using Twitter bootstrap with Node.js and Express framework

Is it possible to integrate Twitter Bootstrap with Node.js and Express? I understand that I need to place CSS and Javascript files in the ./public directory (if it's set as default). However, when trying to implement Twitter Bootstrap on Node.js and ...

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

Tips for accessing the parent reference while binding using the .on() method

I needed to attach an event like this $("div").on("click", "li",function() { var div= $(this).parent().parent(); //this is what i'm using //..... }); above the <div> <ul> <li>1</li> <li>e2</l ...

The height of the multicell generated by fpdf is inconsistent

After writing the code below, everything seems to be working fine except for the multicell row heights which are not displaying correctly. I encountered this issue several times while testing it out. $x=$pdf->GetY(); $pdf->SetY($x+1); include_once( ...

Passing a message from a Struts2 action to jQuery

When using jQuery Ajax to call a Struts2 action, I have the following setup: $.ajax ({ url: 'callAction.action', type: 'POST', data: data, dataType: 'string', success: function (data ...

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...

Importing text data from a text file in Java or jQuery without the need for a web server

I've attempted to utilize both the jQuery.Get() and $.Get() methods for this task, but they don't seem to be working as expected. <head> <script type="text/javascript" src="jquery-2.1.3.min.js" > </script> <script lang ...

Positioning elements absolutely within a Material-UI Grid component

Is there a way to align a Material-UI icon with text so that the lowest point of the icon starts exactly at the baseline? We are using Material-UI Grid layout. The issue we are facing is that if we align the icon using 'baseline', it appears too ...

Discovering the font-weight attribute in Selenium IDE

Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...

Displaying a banner at the bottom of a React page

I need to display a banner with the text "All items..." on every page. Currently, I have set the position attribute to fixed, but the banner is aligned to the left and I want it to be centered horizontally instead. Below is my code snippet: export const Ba ...

Dynamic jQuery slideshow featuring a variety of animations applied to individual elements

I'm interested in creating a custom jQuery slideshow that involves animating HTML elements within each slide differently. Specifically, I would like to have 3 divs sliding out to the left with delays on 2 of them, and then being replaced by equivalen ...