How to Use Jquery to Deactivate a Div with a Background Color

Question

How to Use Jquery to Deactivate a Div with a Background Color

Currently, I have a div that contains several child divs. My goal is to disable the parent div and all of its children, showing them in gray color. I initially tried using the CSS property opacity, but unfortunately, the background color didn't change as desired. Can someone please assist me in achieving this effect?

My initial attempt involved:

<div id="rtcontainer" load-complete data-ng-cloak=""
style="left: 0px; top: 4px; width: 315px; height: auto; float: left; position: relative;">
<div><table><thead><tr><th></th></tr></thead></table></div>
<div><table></table></div>
</div>

I attempted the following style:

  <style>
.disabledbutton {
    pointer-events: none;
    opacity: 0.1;   
}
    </style>

Jquery was utilized as follows:

  $("#rtcontainer").addClass("disabledbutton");

While successful in disabling the elements, my challenge lies in changing the background color to gray.

Your assistance with this matter is greatly appreciated. Thank you!

jquery html css

Answer 1

Answer №1

Insert the following CSS code to change the background color to gray:

$(document).ready(function(){
 $("#rtcontainer").addClass("disabledbutton");
})

  
        .disabledbutton {
    pointer-events: none;
    opacity: 0.3;   
    background-color:gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rtcontainer">aa
<div><table><thead><tr><th></th></tr></thead></table></div>
<div><table></table></div>
</div>

Answer 2

Insert the following CSS code to change the background color to gray:

$(document).ready(function(){
 $("#rtcontainer").addClass("disabledbutton");
})

  
        .disabledbutton {
    pointer-events: none;
    opacity: 0.3;   
    background-color:gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rtcontainer">aa
<div><table><thead><tr><th></th></tr></thead></table></div>
<div><table></table></div>
</div>

Answer 3

Answer №2

#rtcontainer div{
  background:gray;
  opacity:0.4;
  pointer-events:none;
}

<div id="rtcontainer">
  <div>
    <table border=1>
      <thead>
        <tr>
          <th>heading</th>
        </tr>
      </thead>
      <tbody>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tbody>
    </table>
  </div>
  <div>
    <table border=1>
      <thead>
        <tr>
          <th>heading</th>
        </tr>
      </thead>
      <tbody>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tbody>
    </table>
  </div>
</div>

Give this a shot.

Answer 4

#rtcontainer div{
  background:gray;
  opacity:0.4;
  pointer-events:none;
}

<div id="rtcontainer">
  <div>
    <table border=1>
      <thead>
        <tr>
          <th>heading</th>
        </tr>
      </thead>
      <tbody>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tbody>
    </table>
  </div>
  <div>
    <table border=1>
      <thead>
        <tr>
          <th>heading</th>
        </tr>
      </thead>
      <tbody>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tbody>
    </table>
  </div>
</div>

Give this a shot.

Answer 5

Answer №3

Change the background-color to gray and only use #rtcontainer as the selector in your css.

#rtcontainer {
    pointer-events: none;
    opacity: 0.3;   
    background-color:gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rtcontainer">aa
<div><table><thead><tr><th></th></tr></thead></table></div>
<div><table></table></div>
</div>

Answer 6

Change the background-color to gray and only use #rtcontainer as the selector in your css.

#rtcontainer {
    pointer-events: none;
    opacity: 0.3;   
    background-color:gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rtcontainer">aa
<div><table><thead><tr><th></th></tr></thead></table></div>
<div><table></table></div>
</div>

How to Use Jquery to Deactivate a Div with a Background Color

Answer №1

Answer №2

Answer №3

Similar questions

Press the button to activate the function

Unable to reach webmethod with jQuery Ajax post request due to URL rewriting

Tips for Choosing Certain List Items in a Responsive Bootstrap Navigation Menu for WordPress

Move a Div to be positioned directly underneath another DIV

Include HTML tag and class inside a JavaScript code block

Animate sliding bar to move from the left using jQuery

Varied approaches to managing responsive layouts

Why are my menu and title shifting as I adjust the page size?

"Encountering a Jackson error while attempting to send multiple objects using jQuery AJAX

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

A step-by-step guide on showcasing freshly submitted input data through Ajax

Do not request for this element within the array

The form data is being passed as null to HttpContext.Current.Request

JavaScript date input formatting with HTML

What is the best way to display both an employee's name and ID on a single line using CSS and HTML?

Spin: twist beyond 360 degrees or less than 0 degrees

Change a Python string in the format 'min:sec' into a time object so it can be displayed correctly and sorted by the jQuery tablesorter

Utilizing an Asterisk/Wildcard in the Name of a CSS Selector

Discover captivating visuals that effortlessly occupy the entire breadth, while gracefully encompassing a mere quarter of the total vertical space on the

Create a dialog box with rounded triangle corners