属性更改后 addEventListener 未更新答案

【问题标题】：addEventListener isn't updated after property change属性更改后 addEventListener 未更新
【发布时间】：2020-01-07 06:07:48
【问题描述】：

在取消选中所有复选框后，我需要显示一个警报框。如果用户单击“取消”，则应再次“选中”最后一个活动复选框。

Alertbox 关闭后，激活的 Checkbox 将被设置为“已选中”

actionOnClose[1].checked = true;

那么为什么“改变”监听器没有被这一行更新

actionOnClose[1].checked = true;

import Swal from 'sweetalert2'

let checkboxes = document.querySelectorAll('input.orders-checkbox'),
    checkboxArray = Array.from(checkboxes),
    checkboxesAll = checkboxArray.length,
    checkboxCounter = 0,
    cancleOrderUrl = document.querySelector('input.confirm-cancel');

let alertBox = (data, routeTo, $form = null, ...actionOnClose) =>
{
    Swal.fire({
        // config code
        onClose: () => {
            switch (actionOnClose[0]) {
                case 'restoreCheckbox':
                    actionOnClose[1].checked = true;
                    // resetting counter to 2 does not work
                    // checkboxCounter = 2;
                    break;

                default:
                    break;
            }
        }
    })
};

let observeCheckbox = (event) =>
{
    let self = event.target;

    if (!self.checked) {
        checkboxCounter++;
    }

    if (self.checked) {
        checkboxCounter--;
    }

    if (checkboxCounter === checkboxesAll) {
        alertBox('orders_cancel', cancleOrderUrl.getAttribute('data-route'), null, 'restoreCheckbox', self);
    }
};

checkboxArray.forEach(function (checkbox)
{
    checkbox.addEventListener('change', event => observeCheckbox(event), true);
});

<input type="checkbox" name="line_items[]" id="7858" value="7858" class="orders-checkbox" checked="checked">

<input type="checkbox" name="line_items[]" id="7859" value="7859" class="orders-checkbox" checked="checked">

<input type="checkbox" name="line_items[]" id="7860" value="7860" class="orders-checkbox" checked="checked">

【问题讨论】：

直接在代码中更改复选框的checked属性值不会触发事件。这有点令人困惑，但这就是它的工作原理。
我用来在工作应用程序中解决此问题的 UI 调整只是禁用复选框，如果它是最后一个带有检查的复选框。这样做的好处是您不再需要警报，并且用户再也不能进行非法操作（取消选中最后一个框）。
@EdLucas 我不能只禁用最后一个复选框。如果取消选择订单中的所有项目，则警报框将用于显示取消整个订单的选项。如果卖家点击取消，那么最后一个停用的商品应该被重新激活

标签： javascript checkbox ecmascript-6

【解决方案1】：

在玩弄了本地/全局变量后，我找到了一个可行的解决方案

将计数器定义为全局变量

window.checkboxCounter = 0;

现在可以重置计数器

switch (actionOnClose[0]) {
   case 'restoreCheckbox':
      // check last unchecked checkbox
      actionOnClose[1].checked = true;

      // reset counter
      window.checkboxCounter = checkboxesAll - 1;
      break;

      default:
         break;
}

【讨论】：