javascript - 当其他三个被禁用时如何启用一个按钮？

Question

我需要创建一个函数，当前三个按钮被禁用时启用第四个按钮。这就是我得到的并且像魅力一样工作：

function apagaMobile() {
    document.getElementById("mobile").disabled = true;
}

function apagaCell() {
    document.getElementById("cell").disabled = true;
}

function apagaSmart() {
    document.getElementById("smart").disabled = true;
}

这适用于具有命名 ID 的三个按钮。所以我需要最后一个功能，当前三个被禁用时启用这个按钮。

<button type="button" class="resolve center-block" data-toggle="tab" href="#menu2" id="answer" disabled>Answer the question</button>

标签： javascript

Answer 1

我会委托和计算

const container = document.getElementById('apagaDiv');
const buttons = [...container.querySelectorAll('.apaga')];
container.addEventListener('click', function(e) {
  const tgt = e.target;
  if (tgt.classList.contains('apaga')) {
    tgt.disabled = true;
    const enable = buttons.filter(but => but.disabled).length === buttons.length;
    document.getElementById("answer").disabled = !enable
  }
})

<div id="apagaDiv">
  <button data-type="smart" class="apaga" type="button">Smart</button>
  <button data-type="mobile" class="apaga" type="button">Mobile</button>
  <button data-type="cell" class="apaga" type="button">Cell</button>
</div>
<button type="button" class="resolve center-block" data-toggle="tab" href="#menu2" id="answer" disabled>Answer the question</button>