AlpineJS/Livewire中如何让.sapId复选框始终保持选中状态

在模态框中使用AlpineJS v2.8.2的x-for指令生成复选框组，要求类名为.sapId的复选框始终保持选中状态，不受其他操作影响。
最初通过jQuery代码$('.sapId').prop('checked', 'checked').attr('disabled', 'disabled');实现了默认选中、不可点击的初始效果，但存在异常：点击.selectColumns类下的其他复选框时，.sapId复选框会直接丢失选中状态，且无法再次选中。试过多种jQuery实现方案均未彻底解决，优先需要Alpine或Livewire原生的实现方案。

关联代码 #

模态框Alpine组件代码 #

<div x-data="{
        data:columns,
        selectedColumns: [],
    }" 
    wire:ignore class="modal fade" id="selectColumnsModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Selecionar Colunas</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <p class="mx-10 mt-4">Selecione até 9 colunas para exibir...</p>
                <div class="text-center mx-10">
                    <div class="input-icon">
                        <input type="text" class="form-control" placeholder="Nome da coluna..." id="searchColumns">
                        <span>
                            <i class="flaticon2-search-1 text-muted"></i>
                        </span>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="mt-6 text-center">
                        <table id="selectColumnsTable" class="table table-hover gy-5">
                            <thead>
                                <th class="text-left">
                                    Coluna
                                </th>
                                <th class="text-left">
                                    <i class="la la-eye"></i>
                                </th>
                            <thead>
                            <tbody>
                                <tr>
                                    <td class="text-left ml-4"> 
                                        <span x-html="columns[1].title"></span> 
                                    </td>
                                    <td class="text-left">
                                        <input x-model="selectedColumns" class="sapId" id="sapId" type="checkbox" :value=columns[1].field>
                                    </td>
                                </tr> 
                                <template x-for="(column, index) in data" :key="index">                          
                                    <tr x-show="column.field != 'id' && column.field != 'sap_id' &&column.title != '' && column.title != 'CÓDIGO'">
                                        <td class="text-left ml-4"> 
                                            <span x-html="column.title"></span> 
                                        </td>
                                        <td class="text-left">
                                            <input x-model="selectedColumns" id="selectColumns" class="selectColumns" type="checkbox" :value=column.field>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-around">
                    <button @click="displaySelected(selectedColumns)" type="button" class="btn btn-primary col-5" data-target="click">Exibir selecionadas</button>
                    <button type="button" class="btn btn-danger col-5" data-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>

原有最大可选数限制jQuery代码 #

$(".selectColumns").change(function () {
    var displayLimit = 8;
    var selected = $('.selectColumns:checked').length;

    if (selected > displayLimit) {
        $('.selectColumns').not(':checked').attr('disabled', 'disabled');
    } else {
        $('.selectColumns').not(':checked').removeAttr('disabled');
    }       
});

问题根因是jQuery直接操作DOM属性的逻辑和Alpine的x-model双向绑定机制冲突：Alpine会根据内部维护的selectedColumns数组状态重新渲染复选框的选中状态，不会感知jQuery对DOM的修改，只要数组中没有存储sapId对应的值，Alpine重渲染时就会覆盖DOM上的checked状态，导致复选框取消选中。
直接用Alpine原生逻辑实现所有需求，彻底移除相关jQuery代码即可解决，具体修改步骤如下：

1. 初始化组件状态时，直接将必选的sapId字段加入选中数组，同时把最大可选数量配置放到组件状态中统一管理
   修改x-data配置：

   x-data="{
       data: columns,
       // 初始化时就把必选的sapId字段加入选中列表
       selectedColumns: [columns[1].field],
       // 总可选数为9，减去固定必选的1个，普通列最多选8个，和原有逻辑一致
       maxSelectTotal: 9
   }"
   

2. 给sapId复选框原生添加固定的选中、禁用属性，移除x-model绑定，避免被Alpine响应式逻辑联动修改
   将sapId对应的input标签修改为：

   <input 
       class="sapId" 
       id="sapId" 
       type="checkbox" 
       :value="columns[1].field"
       checked
       disabled
   >
   

   由于初始化时已经把sapId对应的值写入selectedColumns数组，提交时该值会自动包含在选中结果中，不需要额外绑定x-model。
3. 给普通复选框添加动态disabled绑定，用Alpine响应式逻辑实现最大可选数限制，替换原有jQuery代码
   将x-for循环内的普通复选框修改为：

   <input 
       x-model="selectedColumns" 
       class="selectColumns" 
       type="checkbox" 
       :value="column.field"
       :disabled="selectedColumns.length >= maxSelectTotal && !selectedColumns.includes(column.field)"
   >
   

   逻辑和原有jQuery逻辑完全一致：已选数量达到上限时，所有未选中的普通复选框自动禁用，已选中的选项仍可正常取消勾选。
4. 增加状态监听器，兜底保证必选值不会被异常操作移除
   在组件根div上添加x-init监听器，每次选中列表变化时自动检查必选值是否存在，缺失则自动补入：

   x-init="$watch('selectedColumns', list => {
       const requiredField = columns[1].field;
       if (!list.includes(requiredField)) list.push(requiredField);
   })"
   

完成以上修改后，所有状态都由Alpine统一管理，不存在DOM操作和框架渲染的冲突，sapId复选框会始终保持选中禁用状态，其他复选框的交互、数量限制逻辑都能正常运行。

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