如何在打开一个面板时禁用手风琴

如何解决如何在打开一个面板时禁用手风琴

所以我有一个自举式手风琴，仅当我的SVG处于活动状态时才打开（向下箭头）。我遇到的问题是当打开行时。如果我错误地单击了另一行，则打开的行会为被单击的行加载数据，并用被单击的行填充该行。

我想阻止这种情况的发生。当我的行打开时，是否可以禁用任何行的手风琴？

我正在将Bootstrap手风琴用于敲除数据绑定。但是我想知道是否有一种简单的方法可以通过jquery做到这一点？

<div id="accordion">
            <div class="card">
                 <div class="card-header" id="headingOne">

        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Set Next</th>
                    <th>Name</th>
                    <th>Bench</th>
                    <th>Transacted</th>
                    @*<th>Receipe Name</th>*@
                </tr>
            </thead>
            
            <tbody data-bind="foreach: Stages">

                <tr >
                    <td data-bind="css: CellClass">
                        <button class="btn btn-warning" data-bind="attr: {'data-id': Id}" onclick="saveStepId(this);" data-toggle="modal" data-target="#moveReason">@Html.LocalisedStringFor(model => model.MovetoStageText)</button>
                        <a class="text" data-bind="attr: {'data-id': Id}" data-toggle="modal"><span>@Html.LocalisedStringFor(model => model.CurrentPositionText)</span></a>
                    </td>

                    <td class="accordion-toggle" data-toggle="collapse" aria-expanded="false" data-bind="attr: {'data-target': '#' + RecipeName(),'aria-controls': '#' + RecipeName()},click: $root.GetRecipeHeader.bind(this,RecipeName())">
                        <!-- ko if: IsNext()-->
                        <svg width="1em" data-bind="if: RecipeName" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                        </svg>
                        <!--/ko-->
                        <!-- ko if: IsNext() === 'False'-->
                        &nbsp;&nbsp;&nbsp;
                         <!--/ko-->
                        <span data-bind="text: ProcessName"></span>
                    </td>
                    <td><span data-bind="text: BenchName"></span></td>
                    <td><span data-bind="text: TransactionStatus"></span></td>
                   
                </tr>
              
            <!-- ko if: IsNext() -->
                <tr id="" class="collapse" data-bind="attr: {'id':RecipeName}" data-parent="#accordion">
                   
                    <td colspan="5">
                        <div class="accordion-inner" >
                            <ul data-bind="foreach: $parent.Recipestages">
                              
                                <li>
                                    <!--ko if: CanMove()-->
                                    <button class="btn btn-warning moveRecipestep" onclick="saveRecipeId(this);" id="blah" data-bind="attr: {'data-id': StepId,data_recipe_name: $parent.RecipeName}" data-toggle="modal" data-target="#moveRecipeReason">@Html.LocalisedStringFor(model => model.MovetoStageText)</button>
                                    <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-arrow-left-short" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M7.854 4.646a.5.5 0 0 1 0 .708L5.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z" />
                                        <path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h6.5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z" />
                                    </svg>
                                    <!--/ko--> &nbsp;
                                    <span data-bind="text: StepName"></span>
                                    <br />
                                    <br />
                                </li>
                            
                                
                            </ul>

                        </div>

                    </td>
                    
                </tr>
              <!--/ko-->
            </tbody>

        </table>
            </div>
    </div>
        </div>