我怎样才能使一个复选框总是通过获取它的值被选中?

Question

对于这个任务，我使用了laravel-livewire, alpine.js和bootstrap。

我有一个模态在我的屏幕，其中包含一个表，用户可以选择多达9列显示。在所有情况下都需要默认显示一个列(因此默认情况下需要选中它)，并且正如我所说，用户将选择另一个9。

下面是表的构造:

<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>

在:value属性中，我正在接收数据库字段的名称。例如，我需要显示的默认名称为sap_id

我用来限制列选择的代码:

$(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);
}

所以，综上所述:如果:value属性等于sap_id，则复选框默认需要勾选，也可以不勾选。我在做这件事上遇到了麻烦。事实上，我甚至不知道这是否是完成这项任务的最佳方法……所以如果你们能帮我，我会很高兴的。提前感谢!

Answer 1

在本例中，我为默认列创建了一个列表:defaultSelected，我们可以将其添加到columnSelector组件的init()函数中的选定列表中。此外，在isDisabled(field)函数中，我们还检查相应的列是否存在于defaultSelected中。

注意:取消注释document.addEventListener行，它被禁用，因为只有SO代码片段窗口。

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
//document.addEventListener('alpine:init', () => {
Alpine.data('columnSelector', () => ({
defaultSelected: ['sap_id'],
maxSelected: 3,
data: [
{title: 'SAP ID', field: 'sap_id'},
{title: 'Col #1', field: 'field1'},
{title: 'Col #2', field: 'field2'},
{title: 'Col #3', field: 'field3'},
{title: 'Col #4', field: 'field4'},
{title: 'Col #5', field: 'field5'},
],
selectedColumns: [],
init() {
this.selectedColumns.push(...this.defaultSelected)
},
isDisabled(field) {
return this.defaultSelected.includes(field) ||
(this.selectedColumns.length === this.maxSelected &&
!this.selectedColumns.includes(field))
},
}))
//})
</script>
<div x-data="columnSelector">
<table>
<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"
class="selectColumns"
type="checkbox"
:value=column.field
:disabled="isDisabled(column.field)"
>
</td>
</tr>
</template>
</tbody>
</table>
Selected columns: <span x-text="`${selectedColumns.length}/${maxSelected}`"></span>
</div>