Filament•2y ago

Checkboxlist and limits

I know there is an option for Selects, but is not not a solution for limiting the number of items selected in a checkboxlist? I know I can do a rule, but wanting something with a bit better UX than that. Figured I would ask here while I dig.

10 Replies

Dan Harrin•2y ago

I don't think theres anything UI-wise... yet

Mark ChaneyOP•2y ago

I just found https://stackoverflow.com/questions/61903452/stop-checkbox-from-being-check-in-alpinejs. Will give it a go next time I’m at my computer

Stack Overflow

Stop checkbox from being check in alpineJS?

i started using alpine JS in my project and encountered this situation, i dont really know the best way to approach this. I have a input checkboxes and i need to restrict the user to only select 12...

Mark ChaneyOP•2y ago

Would obviously need to be combined with some sort of messaging

Dan Harrin•2y ago

it just needs x-bind:disabled i think

toeknee•2y ago

@mark_chaney did that resolve it for you?

Mark ChaneyOP•2y ago

@toeknee_iom I came up with https://codepen.io/MACscr/pen/MWqoNvN?editors=1001, but when i tried to use it within the form, I didnt have any luck. Wasnt sure important and I think a rule is good enough for now.

Group::make([
    CheckboxList::make('decline_reasons')
        ->label('Reason (Select up to 3)')
        ->hint(new HtmlString('<span x-text="count"></span> of 3 Selected.'))
        ->extraAttributes([
            ':disabled' => '!$el.checked && count >= limit',
            'x-ref' => 'checkboxes',
            'x-model' => 'checkboxes',
        ])
        ->options($this->reasons())
        ->rules([
            function () {
                return function ($attribute, $value, $fail) {
                    if (count($value) > 3) {
                        $fail("You can choose up to 3 reasons.");
                    }
                };
            },
        ]),
])->extraAttributes(['x-data' => '
    limit: 3,
    checkboxes: [],
    get count() { return this.checkboxes.length; },
    isChecked(i) { return this.checkboxes.includes(i); }
']),

Group::make([
    CheckboxList::make('decline_reasons')
        ->label('Reason (Select up to 3)')
        ->hint(new HtmlString('<span x-text="count"></span> of 3 Selected.'))
        ->extraAttributes([
            ':disabled' => '!$el.checked && count >= limit',
            'x-ref' => 'checkboxes',
            'x-model' => 'checkboxes',
        ])
        ->options($this->reasons())
        ->rules([
            function () {
                return function ($attribute, $value, $fail) {
                    if (count($value) > 3) {
                        $fail("You can choose up to 3 reasons.");
                    }
                };
            },
        ]),
])->extraAttributes(['x-data' => '
    limit: 3,
    checkboxes: [],
    get count() { return this.checkboxes.length; },
    isChecked(i) { return this.checkboxes.includes(i); }
']),

MACscr

CodePen

MWqoNvN

...

Mark ChaneyOP•2y ago

its a starting point at least for someone else The basic count idea i had at first didnt work consistently as :disabled wasnt updating on every change, so why i had to setup a method instead

toeknee•2y ago

Ok that makes sense, not elegant but it works 🙂 It would make sense a limit could be set with ->limit() with a notice as to why they can't select. Disabling wouldn't always work as you won't be able to de-toggle.

Mark ChaneyOP•2y ago

@toeknee_iom you can detoggle, did you try out the codepen?

toeknee•2y ago

With yours you can :-), sorry I was thinking out loud!

Gaming

Programming

Checkboxlist and limits