Alpine.js中如何让值为sap_id的复选框默认始终选中不可取消

• 开发所用技术栈：Laravel Livewire、Alpine.js、Bootstrap
• 核心需求：在Bootstrap模态框内放置列选择表格，用户最多可选择9个列表展示列；其中sap_id为强制展示列，需要默认选中且不允许用户取消勾选。

列选择表格渲染代码 #

<tbody>
   <template x-for="column in data" >
      <tr x-show="column.title != ''">
         <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>

选列数量限制逻辑（jQuery实现） #

$(document).ready(function () {
    $("input[id='selectColumns']").change(function () {
        var maxAllowed = 8;
        var selected = $("input[id='selectColumns']:checked").length;
        
        if (selected > maxAllowed) {
            $("input[id='selectColumns']").not(":checked").attr("disabled",true);
        } else {
            $("input[id='selectColumns']").not(":checked").removeAttr('disabled');
        }       
    });
});

选中列渲染逻辑 #

function displaySelected(selectedColumns) {
    let newColumns = columns.filter((column) => {
       return selectedColumns.includes(column.field);
    });

    datatable.destroy();
    $('#selectColumnsModal').modal('hide');
    Clients.init(newColumns);
}

原有实现存在三个明显问题：

1. 重复给多个复选框设置相同idselectColumns，不符合HTML id全局唯一的规范，选择器逻辑存在隐患
2. 初始化selectedColumns状态时没有预加入sap_id，导致必选项无法默认选中
3. 混用jQuery直接操作DOM和Alpine响应式状态，容易出现状态和DOM不同步的异常，且没有给sap_id对应复选框加禁用限制。

具体调整步骤如下：

1. 初始化Alpine状态时，直接把sap_id放入selectedColumns数组作为默认值，保证必选项初始就是选中状态，示例初始化代码：

   x-data="{
       data: [], // 原有列配置数据
       selectedColumns: ['sap_id'], // 预加入必选字段
   }"
   

2. 调整复选框属性，移除重复的id，通过Alpine动态绑定属性实现两个限制：sap_id对应选项永久禁用、选中列总数达到9个时禁用所有未选的非必选项，调整后的复选框代码如下：

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

3. 删除原有的jQuery数量监听逻辑，上面的动态绑定已经通过Alpine响应式能力原生实现了数量限制，不会出现状态同步问题，且逻辑更简洁。

调整后无需修改displaySelected函数，sap_id会永久存在于selectedColumns数组中，渲染时会自动保留，完全符合需求。

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