Question

document.getElementById("b1").disabled = true;

body {
  padding: 1em;
}

<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<div class="ui container">
  <button id="b1" class="ui red button">Red</button>
  <button id="b2" class="ui yellow button">Orange</button>
</div>

我有一个SemanticUI按钮，我想禁用该按钮（因此单击它不会执行任何操作），但我不想使其褪色（该按钮应与启用或禁用的外观相同）。

在SemanticUI中有一种简单的方法吗？

Answer 1

语义UI使用此特定CSS规则使其显得褪色：

.ui.button:disabled {
    opacity: 0.45 !important;
}

您可以强制按钮的不透明度为1：

let btn = document.getElementById("b1");
btn.disabled = true;
btn.style = 'opacity: 1 !important';

let btn = document.getElementById("b1");
btn.disabled = true;
btn.style = 'opacity: 1 !important';

body {
  padding: 1em;
}

<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<div class="ui container">
  <button id="b1" class="ui red button">Red</button>
  <button id="b2" class="ui yellow button">Orange</button>
</div>

Answer 2

您可以在开发工具元素检查器中检查:disabled状态的css有3个主要区别

只需覆盖您需要将其退回以显示为正常的内容即可。如果您只希望特定按钮正常显示，请使选择器更具体

.ui.red.button:disabled {
   opacity:1!important;
   cursor:pointer!important;// not sure if you want these 2
   pointer-events:auto!important;
}

禁用SemanticUI中的按钮，但不要使其看起来已禁用吗？

2 个答案: