Conditional checkbox options

[mohdaftab]

Hello,

I am working on a roles based system for an admin account which selects user role from select option.
I have a few roles in the list which can be multi selected and if any of them is selected I need all other roles which are not allowed for multiple roles to be unchecked and if there is a non-multiple role selected then I need all others to be unchecked.

I managed to do this using Javascript but as soon as livewire validation triggers on other fields all the checkboxes which I clicked on gets checked.

I got this fixed using debounce.50000ms on role select option but now the issue is I need some roles to emit a function to load users list in a dropdown with selected role but due to debounce it doesn't work until 50 seconds are gone. Please let me know what is the best way to work this around.

I am a beginner Livewire user and AlpineJS as well.
I also tried AlpineJS and tried to call a javascript function but it behaved the same way.

Please help me find the solution for this issue.

Thank you

This is the javascript I am using

`$(document).on("change", "input.user-role", function (e) {

if ($(this).is(":checked")) {
    role = $(this).val();

    if (
        role == "user" ||
        role == "team-manager" ||
        role == "service-provider" ||
        role == "service-associate" ||
        role == "crew" ||
        role == "vendor" ||
        role == "sales-associate" ||
        role == "review-associate"
        ) {
        $("input.user-role").each(function () {
            $(this).prop("checked",false);
        });    
        $("input.user-role[value='"+role+"']").prop("checked",true);
    } else if (
        role == "service-manager" ||
        role == "review-manager" ||
        role == "sales-manager"
    ) {
        $("input.user-role").each(function () {
            if (
                $(this).val() != "sales-manager" &&
                $(this).val() != "service-manager" &&
                $(this).val() != "review-manager"
            ) {
                $(this).prop("checked",false);
            }
        });    
        $("input.user-role[value='"+role+"']").prop("checked",true);

    }

    
}

});`

And this is my blade template:

`

Add User Form

            <div class="form-row">
                @if (session()->has('message'))
                    <div class="col-12">
                        <div class="alert alert-success">
                            {{ session('message') }}
                        </div>
                    </div>
                @endif

                <div class="col-6">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" name="name" id="name" wire:model.lazy="name" aria-describedby="name" placeholder="Name">
                        @error('name') <div class="invalid-feedback d-inline">{{ $message }}</div> @enderror

                    </div>
                </div>

                <div class="col-6">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" name="email" id="email" wire:model.lazy="email" aria-describedby="email" placeholder="Email">
                        @error('email') <div class="invalid-feedback d-inline">{{ $message }}</div> @enderror

                    </div>
                </div>

                <div class="col-6">
                    <div class="form-group">
                        <label for="role">Choose Role</label>
                        
                        @foreach (getDefinedRoles() as $drolekey=>$drole)
                            @if (auth()->user()->isAllowed($drole))
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input user-role" wire:model.debounce.50000ms="role.{{$drole}}" id="role-{{ $drole }}" value="{{ $drole }}">
                                <label for="role-{{ $drole }}" class="custom-control-label">{{ ucwords(str_replace('-',' ',$drole)) }}</label>
                            </div>
                            @endif
                        @endforeach

                        @error('role') <div class="invalid-feedback d-inline">{{ $message }}</div> @enderror
                    </div>

                </div>

                <div class="col6">
                    {{ $parent_role }}
                </div>
            </div>

        </div>
        <div class="card-footer text-muted d-flex justify-content-between">
            <button type="submit" class="btn btn-dark" wire:click="submit">Add</button>
            <button type="reset" class="btn btn-danger">Reset</button>
        </div>
    </div>
</form>

`

[SimoTod]

Delaying livewire for 50 seconds won't fix the issue. It will still trigger a refresh after 50s and you'll probably experience the same bug. If all your checkboxes are managed server side, you might as well reset the other checkboxes on the server using the updated hook.

[SimoTod]

https://laravel-livewire.com/docs/2.x/lifecycle-hooks
In your livewire component, add the updated hook, everytime you check something, it will receive the name of the field and the value, if the value is true you can set all the other properties to false. Livewire will uncheck everything for you. You technically don't need js (although you may want to keep it to provide a better UX).
I don't use livewire too much but they have a discord channel where I'm pretty sure they'll help you. Sice it's not strictly an Alpine issue, they probably know better.

[mohdaftab]

I am able to check the value if it is true or not but I am not able to set all other properties to false using the Livewire component. Please let me know how do I update the other properties.

[SimoTod]

As i said, I don't use livewire but I would exoect something like $this->roles['whatever'] = false; if you ask someone on the livewire channel or repo, they should be able to help.

[mohdaftab]

I have got it working by using hooks.
Thank you so much.

[mohdaftab]

This is what I added in the code

` public function updated($name, $value) {
if (preg_match('#manager#i',$value)) {
foreach ($this->role as $rkey=>$role) {
if (!preg_match('#manager#i',$role)) {
unset($this->role[$rkey]);
}
}
$this->role[] = $value;
$this->role = array_unique($this->role);

    } else {
        $this->role = [];
        $this->role[$value] = $value;
    }
    $this->validateOnly($name);
}`