AngularJS provides ng-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.


#myDIV {
    overflow: scroll;
    height: 300px;
    border: 1px solid #ccc;
    margin: 10px;
    width: 300px;
    cursor: pointer;
    position: relative;

#cover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-color: #ddd;
    opacity: 0.3;


<button ng-click="disableDIV = true">Disable Below UI</button>
<button ng-click="disableDIV = false">Enable Below UI</button>

<div id="myDIV"> 
    <div id="cover" ng-show="disableDIV"></div>
   div 1<br /> <a href="">link 1</a>



Follow this blog by Email

Popular Posts