使用 javascript 在视觉上禁用平面按钮 ( <input type="button"> )

Question

我有 2 个按钮，一个是普通的

Answer 1

您可以使用 filter 更改亮度并模拟 disabled。相应地改变亮度

filter: brightness(80%);

function enable(id) {
  document.getElementById(id).disabled = false;
}

function disable(id) {
  alert(id + " is disabled for 5 seconds.")
  document.getElementById(id).disabled = true;
  setTimeout(function() {
    enable(id);
  }, 5000);

}

#buttonflat {
  border: 0;
  background: lightblue;
  box-shadow: none;
  border-radius: 0px;
  color: red;
}

#buttonflat:hover {
  background-color: blue;
  color: white;
}

#buttonflat:disabled {
  user-select: none;
  filter: brightness(80%);
}

<h1>DISABLE FLAT BUTTON</h1>
<br>
<button id="button" onClick=disable(id)> GOL_101_019_010 </button>
<br><br>
<input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
<br><br>

您也可以将 background-color 更改为 lightblue，将 color 更改为 red，就像您不能悬停它一样。

您还可以更改光标

cursor: not-allowed;

function enable(id) {
  document.getElementById(id).disabled = false;
}

function disable(id) {
  alert(id + " is disabled for 5 seconds.")
  document.getElementById(id).disabled = true;
  setTimeout(function() {
    enable(id);
  }, 5000);

}

#buttonflat {
  border: 0;
  background: lightblue;
  box-shadow: none;
  border-radius: 0px;
  color: red;
}

#buttonflat:hover {
  background-color: blue;
  color: white;
}

#buttonflat:disabled {
  background-color: lightblue;
  color: red;
  user-select: none;
  filter: brightness(80%);
  cursor: not-allowed;
}

<h1>DISABLE FLAT BUTTON</h1>
<br>
<button id="button" onClick=disable(id)> GOL_101_019_010 </button>
<br><br>
<input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
<br><br>

Answer 2

您可以在 disable/enable 方法中使用 CSS 不透明度功能以及 pointerEvents 功能：

function enable(id) {
    document.getElementById(id).disabled = false;
    document.getElementById(id).style.pointerEvents = "auto"; 
    document.getElementById(id).style.opacity = "1"
}

function disable(id) {
    alert(id+" is disabled for 5 seconds.")
    document.getElementById(id).style.pointerEvents = "none"; 
    document.getElementById(id).style.opacity = ".5"
    document.getElementById(id).disabled = true;
    setTimeout(function () {
        enable(id);
    }, 5000);

}

Answer 3

最简单的方法可能只是设置 disabled 属性的样式。例如：

[disabled]{
  opacity:0.5;
}

将使具有 disabled 属性的任何元素的不透明度为 0.5。

function enable(id) {
    document.getElementById(id).disabled = false;
}

function disable(id) {
    alert(id+" is disabled for 5 seconds.")
    document.getElementById(id).disabled = true;
    setTimeout(function () {
        enable(id);
    }, 5000);

}

#buttonflat {
    border: 0;
    background: lightblue;
    box-shadow: none;
    border-radius: 0px;
    color: red;
}

#buttonflat:hover {
    background-color: blue;
    color: white;
}

[disabled]{
  opacity:0.5;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <h1>DISABLE FLAT BUTTON</h1>
    <br>
    <button id="button" onClick=disable(id)> GOL_101_019_010 </button>
    <br><br>    
    <input id="buttonflat" type="button" value="GOL_101_019_010" onClick="disable(id)" />
    <br><br>
</body>

</html>

使用 javascript 在视觉上禁用平面按钮 ( <input type="button"> )

Visually disable flat button ( <input type="button"> ) using javascript

html

javascript

css

button