如何保持选中的复选框？

Question

在这种模式中，我有一组复选框是由来自AlpineJS (v2.8.2)的指令(v2.8.2)生成的，而.sapId复选框是无论如何都需要被选中的复选框。我在这里使用jQuery：$('.sapId').prop('checked', 'checked').attr('disabled', 'disabled');获得了我想要的部分内容。

这使得复选框被选中并不可点击，这正是我想要的。问题:每当我从.selectColumns列表中单击另一个复选框时，.sapId就会失去所选状态，并且无法再选择它。到目前为止，我已经做了一些搜索，并试图使用jQuery，但如果有一种方式通过阿尔卑斯或Livewire本身做将是很好的。

以下是模式：

<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');
            }       
        });

欢迎所有建议，谢谢！

Answer 1

​

<td class="text-left">
  <input x-model="selectedColumns" class="sapId" id="sapId" type="checkbox" disabled="disabled" :value=columns[1].field checked>
</td>
<label for="checkbox">checkbox</label>

​

您只需在输入标签中包含“选中”和“禁用”。

Answer 2

最后，我找到了解决您的问题的方法，您可以这样做，以限制使用apline选中的复选框的数量：

<input x-model="selectedColumns" type="checkbox" :disabled="selectedColumns.lenght > 8 && !$el.checked">

SelectedColumns.length返回数组的长度，$el是一个神奇的属性，可用于检索当前DOM节点。

对于.sapId，您可以这样做：

<input x-model="selectedColumns" type="checkbox" checked disabled>

但是，您必须对.sapId的值进行硬编码，以便让它检查x-model是如何工作的。x-model允许您将输入元素的值绑定到高山数据。