jquery - 在 Jquery 中禁用具有背景颜色的 div

Question

我有 div 它包含子 div 我需要禁用并向父 div 显示灰色以及所有子 div。我尝试使用 CSS 属性opacity，但没有为此设置背景颜色。请帮助我如何禁用和显示灰色。

我试过了：

<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>

我使用了这种风格：

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

查询：

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

我可以禁用，但我需要设置像灰色这样的背景颜色。

谢谢

Answer 1

#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>

尝试这个。

Answer 2

将background-color:grayand 只#rtcontainer用于选择器中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 3

放入background-color: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>