Murali Murali - 1 year ago 88
AngularJS Question

How to disable the button with css

I want to disable the link using it's id in Javascript. By default it's invisible as shown below. I will enable the link when the particular id came from back end.

HTML

<li id="viewroleId" style="display: none;">
<a href="viewrole"><spring:message code="label.viewrole" /></a>
</li>


Javascript:-

if (key == 1) {
var id = value;
var div = document.getElementById(id);

if(div != null){
if (div.style.display == 'none' || div.style.display == '') {
// Here it will display the link
div.style.display = 'block';
}
}
}


In the above Javascript code I will display the link, but I want to display and disable the link. How can I disable the link with CSS instead?

Answer Source

First, create a rule like this in css

.disabled {
    display: block !important; /* since you set the element's display to none inline,
                                  we need to use !important flag (which is pretty bad)
                                  to override the inline style */
    pointer-events: none; /* Disable an element interaction, so it will not respond any event */
    color: #ccc; /* Gray out the text color to signify being disabled */
}

Now in your javascript, just give the element you want to disable the class disabled like so

if (key == 1) {
    var id = value;
    var div = document.getElementById(id);

    if(div != null){
        if (div.className.indexOf('disabled') === -1) {
            // Your element will be visible, and disabled
            div.className += ' disabled';
        }
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download