How can I keep a checkbox always selected?-CodePudding

There is this modal in which I have a group of checkboxes being generated by the directive x-for from AlpineJS (v2.8.2), and the .sapId checkbox is the one that needs to be always selected no matter what. I partially got what I wanted here using jQuery: $('.sapId').prop('checked', 'checked').attr('disabled', 'disabled');.

This made the checkbox checked and unclickable, and that is exactly what I want. Problem: Whenever I click another checkbox from the .selectColumns list, the .sapId loses the selected status and I can't select it anymore. Till now I've done some searches and tried to do this using jQuery, but would be nice if there was a way of doing via Alpine or Livewire itself.

Here is the modal:

<div x-data="{
        data:columns,
        selectedColumns: [],
    }" 
    wire:ignore  id="selectColumnsModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div  role="document">
            <div >
                <div >
                    <h5 >Selecionar Colunas</h5>
                    <button type="button"  data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" ></i>
                    </button>
                </div>
                <p >Selecione até 9 colunas para exibir...</p>
                <div >
                    <div >
                        <input type="text"  placeholder="Nome da coluna..." id="searchColumns">
                        <span>
                            <i ></i>
                        </span>
                    </div>
                </div>
                <div >
                    <div >
                        <table id="selectColumnsTable" >
                            <thead>
                                <th >
                                    Coluna
                                </th>
                                <th >
                                    <i ></i>
                                </th>
                            <thead>
                            <tbody>
                                <tr>
                                    <td > 
                                        <span x-html="columns[1].title"></span> 
                                    </td>
                                    <td >
                                        <input x-model="selectedColumns"  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 > 
                                            <span x-html="column.title"></span> 
                                        </td>
                                        <td >
                                            <input x-model="selectedColumns" id="selectColumns"  type="checkbox" :value=column.field>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div >
                    <button @click="displaySelected(selectedColumns)" type="button"  data-target="click">Exibir selecionadas</button>
                    <button type="button"  data-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>

And just in case, this is the jQuery I'm using to control the limit of boxes that can be selected:

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

All suggestions are welcome, thanks in advance!

CodePudding user response：

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

you can simply include "checked" and "disabled" in the input tag.

CodePudding user response：

This is happening because you are using same x-model="selectedColumns" on both checkbox. Just change the name and this will fix your problem. :)