Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute with jQuery or another method? Thank you.

JS:

if(sum>=window.start_fee){
    $(".shopcart").removeAttr("disabled")
    $(".shopcart").css("background", 'url(/static/images/cart2.png)')
}else{
    $(".shopcart").attr("disabled","disabled")
    $(".shopcart").css("background", 'url(/static/images/cart.png)')
}

CSS:

.shopcart{
     background:url(/static/images/cart.png) no-repeat; 
     border:none; 
     background-size:100% 100%; 
     width:57px; height:50px; 
     float:right;
}
javascriptjqueryhtmlcss

Answer №1

To improve your webpage's functionality, consider creating a CSS class specifically for disabled elements. This approach helps separate design from functionality, making your code cleaner and more organized. Here is an example:

CSS

.shopping-cart{
     background:url(/assets/images/cart-active.png) no-repeat; 
     border:none; 
     background-size:100% 100%; 
     width:57px; height:50px; 
     float:right;
}

.shopping-cart.disabled{
     background:url(/assets/images/cart-inactive.png) no-repeat; 
}

In JavaScript, you can dynamically add or remove the "disabled" class based on certain conditions. For instance:

JS

if(totalPrice >= minimumFee){
    $(".shopping-cart").removeClass("disabled");
} else {
    $(".shopping-cart").addClass("disabled");
}

Answer №2

Instead of Remove attribute, consider using addClass and removeClass methods.

$(document).ready(function(){
if(sum>=window.start_fee){
    $("input[type=submit]").removeClass("submitbtn");
    $("input[type=submit]").addClass("submitbtnnew");   
}
else{
    $("input[type=submit]").addClass("submitbtn");
    $("input[type=submit]").removeClass("submitbtnnew");

}

});
</script>

Set your background image for that specific class.

<style>
.submitbtn{
    background:#000;
}
.submitbtnnew{
    background:#03C;
}
</style>

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

Encapsulate the HTTP request within a common function for reus

My rest-provider service handles all of my http calls, but I've noticed that each function is repeating a lot of the same http code. It seems like I should create a shared function to avoid this repetition and make it easier to update in the future. ...

javascriptangularionic-frameworktypesrxjs

Prevent selection based on JSON information

I am utilizing the Jiren filter library to sort through JSON data. If a particular filter criteria does not match any of the results, I would like to disable that option in the select dropdown. For instance, if "Silversea Expedition" is not found in my re ...

javascriptjqueryjson

What is the best way to evaluate two values using jQuery?

I need to select them and add a new class. <div class="count_1"> <span class="percentage">10 %</span> </div> <div class="count_2"> <span class="percentage">90 %</span> </div> if (parseInt($(".count_1.per ...

jquerycompare

The Naming Convention for NPM Scripts

In my package.json, I have a script that looks similar to this: { ... scripts: { ... "testdb:e2e": "TESTDB_ENV='...' gulp mocha:e2e:backend && gulp mocha:e2e:frontend" } ... } I am interested in adding a s ...

javascriptnpm

A guide on integrating Javascript and CSS files in Express.js

I'm currently running a simple node server from a page.js file as part of a system setup test. Here's the code snippet: var express = require('express'); var app = express(); app.get('/', function(req, res) { res.sendFil ...

htmlnode.jsexpress

Assign a property to an array of objects depending on the presence of a value in a separate array

Looking to manipulate arrays? Here's a task for you: const arrayToCheck = ['a', 'b', 'c', 'd']; We have the main array as follows: const mainArray = [ {name:'alex', code: 'c'}, ...

javascripttypescriptecmascript-6

How can I pull all data from an array using MongoDB query?

I have multiple arrays, but I am only interested in extracting the content related to "PIZZAS." Can anyone advise me on the appropriate query to achieve this? https://i.stack.imgur.com/wHolE.png ...

javascriptarraysjsonmongodbhelper

The UnboundLocalError occurred when trying to access the local variable 'playlist' before it was assigned

Below is the content of my views.py: def create_playlist(request): form = PlaylistForm(request.POST or None) if form.is_valid(): playlist = form.save(commit=False) playlist.name = request.name context={ 'pl ...

pythonhtmldjangoformsexception

Callbacks in Laika tests go untriggered

Meteor.collection.insert() allows for the use of a callback as one of its arguments. To demonstrate, you can start a new Meteor project and execute the following code in the browser's console. my_collection = new Meteor.Collection("myCollection"); my ...

javascriptmeteorlaika

The CSS styling is not taking effect

I'm having trouble with my CSS changes not appearing on the webpage, and I can't seem to figure out why. Specifically, I'm attempting to modify the font, which has previously worked but is now not taking effect. Both my CSS and HTML files ar ...

htmlcsstwitter-bootstrap

Before beginning my selenium scripts, I need to figure out how to set an item using Ruby in the browser's localStorage

Before running my selenium scripts, I am attempting to store an item in the browser's localStorage. I attempted to clear the local storage using this command: driver.get('javascript:localStorage.clear();') This successfully cleared the lo ...

javascriptrubyhtmlselenium-webdriver

Guide for utilizing a table value as a parameter in a mySQL query with PHP

My website features an HTML table that is filled with data pulled from a mySQL table using PHP. Each row in the table is clickable, and when clicked, it opens a modal that contains a form to update and submit data back to the database using a mysql update ...

javascriptphpjqueryhtmlmysql

Update the icon within the expandable display

Is there a way to change the plus sign to a minus sign in an expandable table view on click? (changing fa fa-plus to fa fa-minus) The goal is to have the plus sign displayed when the view is compressed and the minus sign displayed when it is expanded. If ...

javascriptjquerycss

Having trouble getting the CSS class to work in MVC4 with jQuery implementation

I recently created a view page where I implemented some jQuery code: <script type="text/javascript"> $(document).ready(function () { var hdrname = $('#headername').text(); alert(hdrname); if (hdrname == "Pending Assignment") { ...

javascriptjqueryhtmlcssasp.net-mvc-4

Tips for utilizing a dropdown menu in Angular

<div> <label> Categories </label> <select> <option *ngFor = "let category of categories" [value] = "category" (click) = "onCategorySelected( category.name )"> ...

htmlangulardrop-down-menu

The use of Angular's ngClass directive does not work within the link function

I have a straightforward directive that renders an element, and this is the template: <div class="nav-item"></div> The .nav-item class looks like this: .nav-item { height: 50; } Here's the directive in action: angular.module('m ...

javascriptcssangularjs

Adjusting the speed of Flexslider with mousewheel control

I am looking to implement flexslider with mousewheel functionality. Here is an example of how I want it to work: $('#slider').flexslider({ animation: "slide", mousewheel: true, direction: "vertical", ...

javascriptjqueryflexslider

How can I switch the default browser in the most recent version of visual studio code?

Question: The default browser is IE, but I am looking to switch to a different browser. How can I make this change? ...

html

Comprehend the angular and in a confined scope and its brackets

I have been wondering why I have to use double brackets ()() when passing a method from an outer scope to a directive with an isolated scope using '&'. It seems like the function is returned with callThat() and then I need to call it with anothe ...

javascriptangularjsangularjs-directiveangularjs-scope

AngularJS: dynamic autocomplete field with scroll functionality

This is my HTML code: <div class="form-group"> <label class='control-label col-md-4' for='id_paymentCurrency'>{{'PAYMENT_CURRENCY' | translate}}</label> <div class='col-md-4'> ...

cssangularjstypeahead.jsbootstrap-typeaheadtwitter-typeahead