Javascript使按钮不可点击

Question

我的问题是，我有下面的按钮

<button type="button" id="btn_all">All</button>
<button type="button" id="btn_A">A</button>
<button type="button" id="btn_B">B</button>
<button type="button" id="btn_C">C</button>

我的javascript是

let btn_all = document.getElementById("btn_all");
let btn_A = document.getElementById("btn_A");
let btn_B = document.getElementById("btn_B");
let btn_C = document.getElementById("btn_C");
let allButtons = [btn_all,btn_A,btn_B,btn_C];
let abt = btn_A.style.backgroundColor = "red";
function changeColor (e) {

let currentColor = e.target.style.backgroundColor;
if (currentColor != "red") {
e.target.style.backgroundColor = "red";
}else{       
e.target.style.backgroundColor = "";
}

}
function changeColorAll (e) {
let currentColor = e.target.style.backgroundColor;
if (currentColor != "red") {
allButtons.forEach( function(element, index) {

element.style.backgroundColor = "red";

});
}
else {
allButtons.forEach( function(element, index) {
if (index === (allButtons.length -3)) {

element.style.backgroundColor = "red";
}else{
element.style.backgroundColor = "";
}

});
}
}
btn_all.addEventListener("click", changeColorAll);
btn_A.addEventListener("click", changeColor);
btn_B.addEventListener("click", changeColor);
btn_C.addEventListener("click", changeColor);

1-当我点击按钮A、B、C将其背景更改为红色时，按钮All也将其背景颜色更改为红色。

2-当我单击"全部"按钮将其和其他按钮更改为无背景颜色时，至少有一个按钮仍为红色，以防止其无法更改颜色。任何人都可以帮忙。

更新

我想更新我的问题。

1-当我第一次加载页面时，除了按钮A的背景为红色外，所有四个按钮都没有背景颜色。如果我单击B、C按钮，我希望按钮all也变为红色。

2-当我点击按钮All将所有按钮更改为无背景色时，我希望其中一个按钮(A、B、C(仍然是红色，不能点击更改颜色。

Answer 1

对于第一点，在changeColor方法中添加一个条件来检查所有按钮是否为红色。

if (btn_A.style.backgroundColor == "red" && btn_B.style.backgroundColor == "red" && btn_C.style.backgroundColor == "red") {
btn_all.style.backgroundColor = "red";
} else {
btn_all.style.backgroundColor = "";
}

对于第二点，从changeColorAll-else部分删除if-else条件，然后直接更新颜色。

function changeColorAll (e) {
let currentColor = e.target.style.backgroundColor;
if (currentColor != "red") {
allButtons.forEach( function(element, index) {

element.style.backgroundColor = "red";

});
}
else {
allButtons.forEach( function(element, index) {
element.style.backgroundColor = "";
btn_A.style.backgroundColor = "red";
});
}}

此外，在changeColor中添加一个条件，以检查是否所有按钮都不是红色的，如果不是，则更改按钮的颜色

if (btn_A.style.backgroundColor == "" && btn_B.style.backgroundColor == "" && btn_C.style.backgroundColor == "") {
btn_A.style.backgroundColor = "red"
}

Answer 2

//HTML
$('#Button').prop('disabled', true);
//JS
document.getElementById("Button").disabled = !0;