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- 当我单击 All 按钮将其和其他按钮更改为 no backgroudColor时，至少一个按钮仍为红色并防止它无法更改颜色。 任何人都可以帮忙。

更新

我想更新我的问题。

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

2-当我单击按钮全部以将所有按钮更改为无背景颜色时，我希望这些按钮之一（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;