AngularJS provides disabled for disabling input fields, It wont work for DIV elements. For DIV elements, we have to show another DIV on top of the present div element. The cover DIV won't be have any content and it is transparent. Users can see content through this cover div.
Source Code          DEMO

CSS

.disable-whole-div__myDIV {
    overflow: scroll;
    height: 300px;
    border: 1px solid #ccc;
    margin: 10px;
    width: 300px;
    cursor: pointer;
    position: relative;
}

.disable-whole-div__cover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-color: #ddd;
    opacity: 0.3;
}

Markup

Observe below highlighted code
<button (click)="disableDIV = true">Disable Below UI</button>
<button (click)="disableDIV = false">Enable Below UI</button>

<div class="disable-whole-div__myDIV">
    <div class="disable-whole-div__cover" [hidden]="!disableDIV"></div>
    div 1 <br /> <a href="">link 1</a>
</div>

3 comments:

Blogroll

Popular Posts