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

Excess gap detected in dual-column design

Populate jQuery datatable using an XML response

What is the best method to reset numerous select boxes within a form using jQuery?

Retrieve the PDF document from the AJAX call and save it as a

Discovering the method to extract a Specific Form Field value with JQuery

Surprising sight of a blank canvas behind the font-awesome icon

What is the best way to align HTML elements in a single row?

PLupload does not support Flash runtime in Internet Explorer 8

Finding the index and value of a specific HTML element with jQuery click event

Implement user interface for adding recipients in email application

Modify the text displayed on the upload file button

Submitting information via jQuery

When using Math.floor(Math.random() * val.length), the result will be a letter rather than a number

Displaying JSON data based on a specific key

Styling a Fixed Header in CSS/HTML - Scroll Effect

Discover the technique of accessing HTML/CSS toggle switch value in Golang

Dynamic scrolling text for overflowing text display

The dropdown feature within a bootstrap button group is malfunctioning

The imported font used in Firefox is displaying with a striking underline text-decoration

Angular's responsiveness is enhanced by CSS Grid technology