div禁用后，更改为禁用的颜色或其内容的CSS？

Question

我在<div>中有按钮和图片。当我<div>禁用时。它的内容不会像禁用一样变灰。我仍然可以像启用一样。

如何更改div内容背景以禁用颜色（透明）？

<div style="display:inline-block" id="divImgAddOrUpdate" >  
   <button id="imgAddOrUpdate" type="submit" class="btn"  >
            <img src="Images/save.png" alt="" />Add/Update
   </button>
</div>

JS

<script type="text/javascript">
         $('#divImgAddOrUpdate').prop('disabled', true);
         $('#divImgAddOrUpdate *').prop('disabled', true);
</script>

CSS

 .btn {      

    border:.1em #868686 solid; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 1em;
    font-family:Segoe UI; 
    padding: 5px 10px 5px 5px; 
    text-decoration:none; 
    display:inline-block;
    text-shadow: 0px 0px 0 rgba(0,0,0,0.3);
    text-align:left;
    color: #000000;
    background-color: #f4f5f5; 
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
 }
.btn:hover{
    border:1px solid #bfc4c4;
    background-color: #d9dddd; background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
}
.btn img {
    vertical-align:middle;
}

JSFiddle

Answer 1

您可以尝试使用:disabled伪类和:not伪类，如下所示：

/* this is edited from your original style */
.btn:not(:disabled):hover{
    border:1px solid #bfc4c4;
    background-color: #d9dddd; background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
}
/* this is added */
.btn:disabled {
   color:grey;
   background-color:gray;
}
/* style for graying out the img */
.btn:disabled > img {    
   filter:gray;
   -webkit-filter:grayscale(100%);
   -moz-filter:grayscale(100%);    
   filter:grayscale(100%);
}

以下是working fiddle