如何使用css禁用按钮

-1

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

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的链接呢？

来源

2017-07-26 Murali

查看[ngDisabled]（https://docs.angularjs.org/api/ng/directive/ngDisabled）。 – Kevin

为什么不添加作为属性禁用？ - 也作为建议 - 从不做内联css或js - 这是不好的做法，导致难以维护的代码 – ThisGuyHasTwoThumbs

如果我保持ng禁用，那么我需要为每个禁用的href提供不同的名称。现在，ID来自数据库，因此我可以使用它的ID进行显示。 – Murali

-1

首先，在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'; 
     } 
    } 
}

来源

2017-07-26 18:30:00 Dummy

Dummy您在此指定的类名是什么 – Murali

'className'是允许您操作每个' HTMLElement' – Dummy

我得到的div.className是“”（空） – Murali

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

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

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

来源

2017-08-02 08:49:31

如何使用css禁用按钮

回答

相关问题