lundi 15 février 2021

How Can I Uncheck a Checkbox When a Modal Closed With Alpine Js?

I'm triyng something with Livewire and Alpine Js. I've a checkbox that is opening a modal when checked:

<div x-data="{ showModal: false }" class="flex flex-col w-full md:w-full px-3 mb-6">
    <input wire:model="projectOptions" x-on:click="showModal = true" name="projectOptions" value="1" type="checkbox" class="opacity-0 absolute">
    <div x-show="showModal"
         x-cloak
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 transform"
         x-transition:enter-end="opacity-100 transform"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center px-4 md:p-0">
        <div @click.away="showModal = false" class="flex flex-col bg-white rounded-xl shadow-lg py-4 w-3/12">
            <div class="flex mb-4 justify-around">
                <h3 class="text-2xl font-semibold">Title</h3>
            </div>
            <div wire:ignore class="editor-layout" id="privacyContract">
                <div x-data
                     x-ref="quillEditor"
                     x-init="toolbarOptions = ['bold', 'italic', {'list': 'bullet'}, 'align'];
                         quill2 = new Quill($refs.quillEditor, 
                         {
                             theme: 'snow',
                             placeholder: 'Content here...',
                             modules: {
                                 toolbar: toolbarOptions
                             }
                         });
                         quill2.on('text-change', function () 
                         { 
                             $dispatch('input', quill2.root.innerHTML);
                         });"
                     wire:model.debounce.2000ms="privacyContract">
                </div>
            </div>
            <div class="flex justify-end mr-4">
                <button wire:loading.attr="disabled" class="">Send</button>
            </div>
        </div>
    </div>
</div>

When I click outside modal it closing (with @click.away) but checkbox stays checked. How can I uncheck that checkbox when I click outside of modal?




Aucun commentaire:

Enregistrer un commentaire