禁用元素的最佳方法

Question

禁用按钮和表单输入等元素的最佳方法是什么？

我将使用具有不同样式的按钮集合（在下图中显示）作为更好地解释我的问题的场景。

我用来禁用这些按钮的老式方法是将以下CSS应用于每个按钮。

.button.disabled,
.button.disabled:hover {
  color: #fff !important;
  background-color: #666C80 !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
}

.button.button-outlined.disabled,
.button.button-outlined.disabled:hover {
  color: #2B508F;
  background-color: #fff;
  border: 1px solid #2B508F;
}

显然，每个按钮都有不同的样式规则，这意味着每次我们以正常样式更改它们时，.disabled样式规则都必须更改。

例如，如果我想更改border-radius或为按钮添加阴影，我将必须将这些默认值应用于该按钮的禁用样式部分。

在这里提出这个问题之前，我试图通过尝试以下方法尝试解决这个问题：

/*Disbiled settings*/
.button.disabled, .button.disabled:hover, 
button.disabled, button.disabled:hover,
button:disabled, button:disabled:hover {
    opacity: 0.7;
    border: 1px solid inherit !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.disabled:after {
    content: "";
    width: 100%; height: 100%;
    position: absolute; 
    left: 0; top: 0; 
    bottom: 0; right: 0;
    cursor: not-allowed;
    pointer-events: normal;
}

因此，当.disabled应用于元素时，将在元素上方放置一个不可见的框，并使用＆＃34;完全覆盖它：＆＃34; - 正如上面的代码所解释的那样。

此方法应该可以在元素上方使用此隐形框，如果禁用单击或悬停其后面的元素，则应该简单地“禁用”＆＃39; ：悬停效果。但事实并非如此！我错过了什么？

我在这里放了一个JSfiddle：https://jsfiddle.net/pdnxreyd/1

仅供参考：

1）以下JS片段用于禁用单击已禁用的元素：

//Prevent Clicking on .active & disabled links
    $('.active, .noLink > a, a[href="#"], .disabled, disabled').click(function(e) {
        e.preventDefault();
    });

2）我真的只想应用不透明度：0.8;和游标：不允许所有.disabled元素。

Answer 1

我能看到的“最佳”方法是利用SCSS并定义

.button
{
  background-color: $buttonColor;

    &.disabled
    {
        cursor: not-allowed;
        background-color: desaturate( $buttonColor, 50% );

    }
}

你显然可以制作一种方法来传递参数中的颜色。

否则保持传统方法，一个想法是保持背景颜色为白色或灰色，并在顶部添加真正的按钮组件。然后调整此叠加层的不透明度。以这种方式，按钮将被着色但不透明。

Answer 2

这取决于您何时以及为何要禁用按钮。其中一种方法是使用更大的z-index创建另一个“悬停”在按钮上的元素。看小提琴： http://jsfiddle.net/myphdgLc/

基本上你会使用如下结构：

<div class="cont">
    <span class="disable"> </span>
    <a class="button disabled" href="#">Button</a>
</div>

使用以下CSS：

.cont{
    position:relative;
    display:inline-block;
}
.disable{
    position:absolute;
    width:100%;
    height:100%;
    z-index:9999;
    background:transparent;
}
.disable:hover{
    cursor: not-allowed;
}

当然，您可以使用JavaScript动态地在特定按钮之前和之后追加这些新元素。此方法也会自动停止click事件，因此您不需要JavaScript函数。

Answer 3

很难理解你在问题中提出的问题，我理解你有两个可能的问题。

1。如何在禁用按钮时从按钮中删除触摸/单击事件

https://css-tricks.com/almanac/properties/p/pointer-events/

指针事件将通过css

禁用click事件

.disabled {
  ...
  pointer-events: none;
}

2。一种通用样式，可应用于所有禁用的按钮样式。

简单地减少元素的不透明度可能足以表示按钮被禁用。无论应用何种样式，这都会使按钮变暗。

.disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}