Utilize CSS to style active buttons with JavaScript

Question

Utilize CSS to style active buttons with JavaScript

In an HTML document, the dynamic generation of divs and buttons using JavaScript can be seen in the code snippet below.

<div style="background: rgb(247, 247, 247);">
  <button class ="xyz" disabled="disabled">Button1</button>
</div>
<div style="background: rgb(247, 247, 247);">
  <button class ="xyz" disabled="disabled">Button2</button>
</div>
<div style="background: rgb(247, 247, 247);">
  <button class ="xyz">Button3</button>
</div>

The challenge is to change the css(background color) of only the last div where the Button is not disabled. Attempts made with jQuery resulted in changing the css for all divs above it. A solution involving either jQuery or JavaScript is sought to specifically target the last relevant div element.

$(".xyz").parent().css({ "background": "rgb(95, 49, 49)" });

jquery css button apply

Answer 1

Answer №1

To achieve the desired outcome, it is recommended to utilize both :not() and :disabled

:not(:disabled)

$(".xyz:not(:disabled)").parent().css({ "background": "rgb(95, 49, 49)" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background: rgb(247, 247, 247);">
  <button class="xyz" disabled="disabled">Button1</button>
</div>
<div style="background: rgb(247, 247, 247);">
  <button class="xyz" disabled="disabled">Button2</button>
</div>
<div style="background: rgb(247, 247, 247);">
  <button class="xyz">Button3</button>
</div>

Answer 2

To achieve the desired outcome, it is recommended to utilize both :not() and :disabled

:not(:disabled)

$(".xyz:not(:disabled)").parent().css({ "background": "rgb(95, 49, 49)" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background: rgb(247, 247, 247);">
  <button class="xyz" disabled="disabled">Button1</button>
</div>
<div style="background: rgb(247, 247, 247);">
  <button class="xyz" disabled="disabled">Button2</button>
</div>
<div style="background: rgb(247, 247, 247);">
  <button class="xyz">Button3</button>
</div>

Answer 3

Answer №2

To achieve the desired result, you can simply apply the last() method before the parent(). Here's an example that demonstrates how it works:

$(".xyz").last().parent().css({ "background": "rgb(95, 49, 49)" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background: rgb(247, 247, 247);">
<button class ="xyz" disabled="disabled">Button1</button>
</div>
<div style="background: rgb(247, 247, 247);">
<button class ="xyz" disabled="disabled">Button2</button>
</div>
<div style="background: rgb(247, 247, 247);">
<button class ="xyz">Button3</button>
</div>
My requirement is to change the css (background color) of only the last div in which the button is not disabled. I'm using jQuery for this task, but currently, it changes the css for all the above divs as well. Can you provide a solution in jQuery or JavaScript for this specific requirement?

Answer 4

To achieve the desired result, you can simply apply the last() method before the parent(). Here's an example that demonstrates how it works:

$(".xyz").last().parent().css({ "background": "rgb(95, 49, 49)" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background: rgb(247, 247, 247);">
<button class ="xyz" disabled="disabled">Button1</button>
</div>
<div style="background: rgb(247, 247, 247);">
<button class ="xyz" disabled="disabled">Button2</button>
</div>
<div style="background: rgb(247, 247, 247);">
<button class ="xyz">Button3</button>
</div>
My requirement is to change the css (background color) of only the last div in which the button is not disabled. I'm using jQuery for this task, but currently, it changes the css for all the above divs as well. Can you provide a solution in jQuery or JavaScript for this specific requirement?

Answer 5

Answer №3

Thank you for your query. Applying styles to all div elements when the button is enabled can be achieved using the following code snippet:

The selector to target is button:enabled.

$(function(){
    $("button:enabled").parent().css({ "background": "rgb(95, 49, 49)" }); 
});

Answer 6

Thank you for your query. Applying styles to all div elements when the button is enabled can be achieved using the following code snippet:

The selector to target is button:enabled.

$(function(){
    $("button:enabled").parent().css({ "background": "rgb(95, 49, 49)" }); 
});

Answer 7

Answer №4

If you want to dynamically generate HTML and apply a background color to all enabled buttons, this code snippet will do the trick.

$('button:not(:disabled)').parent().css({ "background": "rgb(95, 49, 49)" });

Check out the JSFiddle for a live example: https://jsfiddle.net/md9pthta/

Answer 8

If you want to dynamically generate HTML and apply a background color to all enabled buttons, this code snippet will do the trick.

$('button:not(:disabled)').parent().css({ "background": "rgb(95, 49, 49)" });

Check out the JSFiddle for a live example: https://jsfiddle.net/md9pthta/

Answer 9

Answer №5

Here is the live example on Fiddle: https://jsfiddle.net/hvo5fnt1/

Modified JavaScript code:

$(".xyz").last().css({ "background": "rgb(95, 49, 49)" });

Answer 10

Here is the live example on Fiddle: https://jsfiddle.net/hvo5fnt1/

Modified JavaScript code:

$(".xyz").last().css({ "background": "rgb(95, 49, 49)" });

Answer 11

Answer №6

Check out this fiddle You can find the jQuery code I added to your script here:

$(".xyz:not(:disabled)").parent().css({ "background": "rgb(95, 49, 49)" });

Answer 12

Check out this fiddle You can find the jQuery code I added to your script here:

$(".xyz:not(:disabled)").parent().css({ "background": "rgb(95, 49, 49)" });

Answer 13

Answer №7

If you're looking to make changes to a specific element using jQuery, you can utilize the selector feature to target the desired element and then modify its CSS attributes accordingly.

Take a look at the example selector provided below:

$( ".xyz[disabled!='disabled']" ).parent()

For a live demonstration, check out this Fiddle:

Click here for the Fiddle link

Answer 14

If you're looking to make changes to a specific element using jQuery, you can utilize the selector feature to target the desired element and then modify its CSS attributes accordingly.

Take a look at the example selector provided below:

$( ".xyz[disabled!='disabled']" ).parent()

For a live demonstration, check out this Fiddle:

Click here for the Fiddle link

Answer 15

Answer №8

To customize the style of disabled buttons, you can utilize attribute selector .xyz[disabled], while .xyz can be used for buttons that are not disabled.

For further information, visit this link https://www.w3schools.com/css/css_attribute_selectors.asp

Answer 16

To customize the style of disabled buttons, you can utilize attribute selector .xyz[disabled], while .xyz can be used for buttons that are not disabled.

For further information, visit this link https://www.w3schools.com/css/css_attribute_selectors.asp

Utilize CSS to style active buttons with JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

How can I reset a CSS position sticky element using JavaScript?

Switching an :active class using ReactJS

"Enhance Your Website with Dynamic Text Effects using JavaScript

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

Obtaining the Div ID After Clicking on a Link

"Occasional issue with Bootstrap Multiselect not persisting selections when page is reloaded via

Having difficulty positioning content inside a div element

Tips on postponing the loading of an iframe within a collapsed div using jQuery until the div/button is clicked

Guide to retrieving JSON data from a jQuery ajax request

Animate a box moving continuously from the right to the left using jQuery

jQuery Does Not Iterate Through Arrays

Improving the Performance of HTML/CSS Animations - Enhanced Animation Speed

How One Simple Click Can Impact Every Button in jQuery Ajax操作

a personalized attribute value obtained from executing a function

Issue with Selenium: Unable to select the WebElement

Show information retrieved from fetch api

jQuery error: an unexpected token was encountered

Customize DataTables selector by modifying its frame, font, and alignment

Header and footer remain unaligned

Issues with PHP not reflecting changes to MySQL database