Question

我想在Javascript中使用它的id禁用链接。默认情况下，它是不可见的，如下所示。当特定ID来自后端时，我将启用链接。

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';
        }
    }
}

在上面的Javascript代码中，我将显示链接，但我想显示和禁用该链接。如何禁用CSS链接？

Answer 1

如果您的应用基于Angular使用ng-if，这就是“自然方式”

<a ng-if="true" href="yourlink.html">Link<a/>
<a ng-if="!true" href="#">Link<a/>

最好尝试覆盖浏览器本机实现（链接...）;

Answer 2

首先，在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 */
}

现在在你的javascript中，只需给你想要禁用类disabled的元素，就这样

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';
        }
    }
}

如何用css禁用按钮

2 个答案: