如何使复选框始终处于选中状态?

Question

有这种模式，我有一组复选框由AlpineJS (v2.8.2)的指令x-for生成，而.sapId复选框是需要始终选择的，无论如何。我部分得到了我想要的在这里使用jQuery:$('.sapId').prop('checked', 'checked').attr('disabled', 'disabled');。

这使得复选框被选中并且不可点击，这正是我想要的。问题:每当我从.selectColumns列表中单击另一个复选框时，.sapId失去了选中的状态，我不能再选择它了。到目前为止，我已经做了一些搜索，并尝试使用jQuery来实现这一点，但如果有一种方法可以通过Alpine或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>

你可以简单地加入"checked"one_answers";disabled">

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允许您将输入元素的值绑定到Alpine数据。