Javascript使按钮不可点击

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

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

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

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

更新

我想更新我的问题

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

---

2-当我单击“全部按钮”将所有按钮更改为无背景色时，我希望其中一个按钮（A、B、C）仍为红色，并且无法单击以更改颜色。

对于您的第一点，请在

changeColor

方法中添加一个条件，以检查所有按钮是否为红色

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

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"
}

---

你能在JSFIDLE/codepen这样的在线编辑器上提供你的代码，以便我们检查输出吗？这是我的代码，你能澄清每次点击按钮的预期行为吗？我想更新我的问题。这可能是因为我的英语不够好，无法向你解释我的问题。1-当我第一次加载页面时，所有四个按钮都没有背景颜色，除了按钮A的背景为红色。若我点击B，C，按钮，我希望所有的按钮也变为红色。2-当我点击所有按钮将所有按钮更改为无背景色时，我希望其中一个按钮（A、B、C）仍为红色，并且无法点击更改颜色。如果你有什么要我澄清的，请告诉我。我真的需要这个代码。

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