如何使用 javascript 禁用带有样式 (CSS) 的按钮？

Question

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

现在，它做得很好。 它禁用所有其他按钮。 但是，我的问题是，那些带有 CSS class “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>

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

Answer 1

使用:disabled伪 class 来定义禁用按钮应该如何在视觉上有所不同：

.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>

Answer 2

您可以仅将基本cbtn规则应用于那些未禁用的按钮：

.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>