如何用原生JavaScript实现Bootstrap 5手风琴激活项禁用折叠

需求：实现Bootstrap 5手风琴中，已激活展开的项无法被折叠，即禁止点击激活项的按钮使其收起。

现有Bootstrap 5手风琴组件代码：

<div id="accordion-1" class="accordion" role="tablist">
    <div class="accordion-item">
        <h2 class="accordion-header" role="tab"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1">Accordion Item</button></h2>
        <div class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordion-1">
            <div class="accordion-body">
                <p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-2" aria-expanded="false" aria-controls="accordion-1 .item-2">Accordion Item</button></h2>
        <div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordion-1">
            <div class="accordion-body">
                <p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-3" aria-expanded="false" aria-controls="accordion-1 .item-3">Accordion Item</button></h2>
        <div class="accordion-collapse collapse item-3" role="tabpanel" data-bs-parent="#accordion-1">
            <div class="accordion-body">
                <p class="mb-0">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
            </div>
        </div>
    </div>
</div>

已有可正常工作的jQuery解决方案：

$('#accordion-1').on('show.bs.collapse', function() {
    $(this).collapse('hide');
});

$('.accordion-button').on('click', function() {
    $('.accordion-button').each(function() {
        $(this).removeAttr('disabled');
    });
    
    $(this).attr('disabled', 'disabled');
});

自行编写的原生JavaScript代码无法生效：

Array.from(document.getElementsByClassName("accordion-button")).forEach(function(element) {
     element.addEventListener('click', function() {
         if (element.disabled) {
             element.removeAttribute('disabled');
         } else {
             element.setAttribute('disabled','disabled');
         }
     }); 
});

对应原jQuery逻辑，正确的原生JS代码如下：

// 监听手风琴的show.bs.collapse事件，阻止已展开项收起
const accordion = document.getElementById('accordion-1');
accordion.addEventListener('show.bs.collapse', function() {
    // 使用Bootstrap的Collapse实例调用hide方法
    const collapseInstance = bootstrap.Collapse.getOrCreateInstance(this);
    collapseInstance.hide();
});

// 处理按钮点击：移除所有按钮的disabled，给当前点击的按钮添加disabled
const accordionButtons = document.querySelectorAll('.accordion-button');
accordionButtons.forEach(button => {
    button.addEventListener('click', function() {
        // 清除所有按钮的禁用状态
        accordionButtons.forEach(btn => btn.removeAttribute('disabled'));
        // 禁用当前点击的按钮
        this.setAttribute('disabled', 'disabled');
    });
});

说明 #

原无效代码的问题在于没有覆盖jQuery方案的两个核心逻辑：

1. 未监听Bootstrap手风琴的show.bs.collapse事件，无法阻止已展开项的收起动作；
2. 点击按钮时仅切换当前按钮的禁用状态，没有先清除所有按钮的禁用状态再单独禁用当前按钮，逻辑不符合需求。

内容的提问来源于stack exchange，提问作者Gabriel90