如何使用javascript禁用带有样式（CSS）的按钮？答案

【问题标题】：How to disable a button with style (CSS) using javascript?如何使用javascript禁用带有样式（CSS）的按钮？
【发布时间】：2021-07-03 16:06:37
【问题描述】：

我这里有一个简单的脚本，可以在单击按钮时禁用其他按钮。例如，如果用户点击sample disable，它将禁用所有指定的按钮。

现在，它做得很好。它禁用所有其他按钮。但是，我的问题是，那些 CSS 类为“cbtn”的按钮看起来并没有被禁用，而实际上它们是。

我想要完成的是：使按钮 (a) 到 (j) 保留其样式 (CSS)，但显示为禁用，就像 1 到 4 在禁用时的样子。

function resetallamnotes() {
  document.getElementById("1st").disabled = false;
  document.getElementById("2nd").disabled = false;
  document.getElementById("3rd").disabled = false;
  document.getElementById("4th").disabled = false;

  document.getElementById("(a)").disabled = false;
  document.getElementById("(b)").disabled = false;
  document.getElementById("(c)").disabled = false;
  document.getElementById("(d)").disabled = false;
  document.getElementById("(e)").disabled = false;
  document.getElementById("(f)").disabled = false;
  document.getElementById("(g)").disabled = false;
  document.getElementById("(h)").disabled = false;
  document.getElementById("*(i)").disabled = false;
  document.getElementById("(j)").disabled = false;
}

function amnotesDisable1st() {
  document.getElementById("1st").disabled = true;
  document.getElementById("2nd").disabled = true;
  document.getElementById("3rd").disabled = true;
  document.getElementById("4th").disabled = true;
  document.getElementById("(a)").disabled = true;
  document.getElementById("(b)").disabled = true;
  document.getElementById("(c)").disabled = true;
  document.getElementById("(d)").disabled = true;
  document.getElementById("(e)").disabled = true;
  document.getElementById("(f)").disabled = true;
  document.getElementById("(g)").disabled = true;
  document.getElementById("(h)").disabled = true;
  document.getElementById("*(i)").disabled = true;
  document.getElementById("(j)").disabled = true;
}

.cbtn {
  border: 1px solid;
  border-color: #555555;
  border-radius: 3px;
  padding: 7px 9px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: #000000;
  background-color: #e0f2f1;
  font-weight: bold;
  margin-bottom: 10px;
}

.cbtn:hover {
  background-color: #fafafa;
}

.cbtn:active {
  background-color: #e0f7fa;
  transform: translateY(1px);
  outline: none;
  box-shadow: 1px #666666;
}

<button class="cbtn" onclick="resetallamnotes()">Reset</button>
<br><br>
<button id="1st" onclick="amnotesDisable1st()">sample disable</button>
<button id="2nd" onclick="disable2nd()">2</button>
<button id="3rd" onclick="disable3rd()">3</button>
<button id="4th" onclick="disable4th()">4</button>
<br><br>
<button id='(a)' class="cbtn">(a)</button>
<button id='(b)' class="cbtn">(b)</button>
<button id='(c)' class="cbtn">(c)</button>
<button id='(d)' class="cbtn">(d)</button>
<button id='(e)' class="cbtn">(e)</button>
<button id='(f)' class="cbtn">(f)</button>
<button id='(g)' class="cbtn">(g)</button>
<button id='(h)' class="cbtn">(h)</button>
<button id='*(i)' class="cbtn">(i)</button>
<button id='(j)' class="cbtn">(j)</button>

谢谢提前谢谢！非常感谢任何帮助！

【问题讨论】：

这能回答你的问题吗？ Style disabled button with CSS
你真的应该重构使用一个公共类或一个ID数组和一个循环。这种重复太恶心了。
@HereticMonkey 我看了看它，它看起来确实是我想要的。稍后我会尝试一下，以检查是否可以使用该方法解决问题。谢谢！
@isherwood 我同意先生。但这是我现在只能做的。仍然是编码的初学者，并试图构建一个可用的工作工具。我还不能调整它看起来更好。不过谢谢你的建议！

标签： javascript html css

【解决方案1】：

您可以将基本cbtn 规则仅应用于那些不是disabled 的按钮：

.cbtn:not(:disabled) { 
  /* ... */
}

function resetallamnotes() {
  document.getElementById("1st").disabled = false;
  document.getElementById("2nd").disabled = false;
  document.getElementById("3rd").disabled = false;
  document.getElementById("4th").disabled = false;

  document.getElementById("(a)").disabled = false;
  document.getElementById("(b)").disabled = false;
  document.getElementById("(c)").disabled = false;
  document.getElementById("(d)").disabled = false;
  document.getElementById("(e)").disabled = false;
  document.getElementById("(f)").disabled = false;
  document.getElementById("(g)").disabled = false;
  document.getElementById("(h)").disabled = false;
  document.getElementById("*(i)").disabled = false;
  document.getElementById("(j)").disabled = false;
}

function amnotesDisable1st() {
  document.getElementById("1st").disabled = true;
  document.getElementById("2nd").disabled = true;
  document.getElementById("3rd").disabled = true;
  document.getElementById("4th").disabled = true;
  document.getElementById("(a)").disabled = true;
  document.getElementById("(b)").disabled = true;
  document.getElementById("(c)").disabled = true;
  document.getElementById("(d)").disabled = true;
  document.getElementById("(e)").disabled = true;
  document.getElementById("(f)").disabled = true;
  document.getElementById("(g)").disabled = true;
  document.getElementById("(h)").disabled = true;
  document.getElementById("*(i)").disabled = true;
  document.getElementById("(j)").disabled = true;
}

.cbtn:not([disabled]) {
  border: 1px solid;
  border-color: #555555;
  border-radius: 3px;
  padding: 7px 9px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: #000000;
  background-color: #e0f2f1;
  font-weight: bold;
  margin-bottom: 10px;
}

.cbtn:hover {
  background-color: #fafafa;
}

.cbtn:active {
  background-color: #e0f7fa;
  transform: translateY(1px);
  outline: none;
  box-shadow: 1px #666666;
}

<button class="cbtn" onclick="resetallamnotes()">Reset</button>
<br><br>
<button id="1st" onclick="amnotesDisable1st()">sample disable</button>
<button id="2nd" onclick="disable2nd()">2</button>
<button id="3rd" onclick="disable3rd()">3</button>
<button id="4th" onclick="disable4th()">4</button>
<br><br>
<button id='(a)' class="cbtn">(a)</button>
<button id='(b)' class="cbtn">(b)</button>
<button id='(c)' class="cbtn">(c)</button>
<button id='(d)' class="cbtn">(d)</button>
<button id='(e)' class="cbtn">(e)</button>
<button id='(f)' class="cbtn">(f)</button>
<button id='(g)' class="cbtn">(g)</button>
<button id='(h)' class="cbtn">(h)</button>
<button id='*(i)' class="cbtn">(i)</button>
<button id='(j)' class="cbtn">(j)</button>

【讨论】：

:disabled 它有一个伪类。
您好！感谢您抽出宝贵时间进行设置。我希望是否可以保持样式（背景颜色、边框、边框半径等）并且看起来也被禁用或看起来无法点击。
@ixcode 您明确指定了完全相反的内容以使按钮 (a) 到 (j) 保留其样式 (CSS)，但显示为禁用，就像 1 到 4 的样子一样被禁用
那就试试这个.cbtn:hover:not(:disabled){ }和.cbtn:active:not(:disabled){ }
使用提供的工具（:disabled 类或[disabled] 属性选择器），您可以随意设置按钮的样式。

【解决方案2】：

使用:disabled 伪类来定义禁用按钮的视觉差异：

.cbtn:disabled {
  opacity: 0.33;
  pointer-events: none;
}

const buttonIds = ["1st","2nd","3rd","4th","(a)","(b)","(c)","(d)","(e)","(f)","(g)","(h)","*(i)","(j)"];

function toggleDisabled(on) {
  for (const id of buttonIds) {
    const el = document.getElementById(id);
    el.disabled = typeof on !== 'boolean' ? !el.disabled : on;
  }
}

.cbtn {
  border: 1px solid;
  border-color: #555555;
  border-radius: 3px;
  padding: 7px 9px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: #000000;
  background-color: #e0f2f1;
  font-weight: bold;
  margin-bottom: 10px;
}

.cbtn:hover {
  background-color: #fafafa;
}

.cbtn:active {
  background-color: #e0f7fa;
  transform: translateY(1px);
  outline: none;
  box-shadow: 1px #666666;
}

.cbtn:disabled {
  opacity: 0.33;
  pointer-events: none;
}

<button class="cbtn" onclick="toggleDisabled(false)">Reset</button>
<br><br>
<button id="1st" onclick="toggleDisabled(true)">sample disable</button>
<button id="2nd">2</button>
<button id="3rd">3</button>
<button id="4th">4</button>
<br><br>
<button id='(a)' class="cbtn">(a)</button>
<button id='(b)' class="cbtn">(b)</button>
<button id='(c)' class="cbtn">(c)</button>
<button id='(d)' class="cbtn">(d)</button>
<button id='(e)' class="cbtn">(e)</button>
<button id='(f)' class="cbtn">(f)</button>
<button id='(g)' class="cbtn">(g)</button>
<button id='(h)' class="cbtn">(h)</button>
<button id='*(i)' class="cbtn">(i)</button>
<button id='(j)' class="cbtn">(j)</button>

【讨论】：

非常感谢先生！这正是我需要和想要的！雅虎！