Checkbox toggle onclick show modal when toggled on not off

Wappler General How To
#1

Hi
I have a checkbox toggle that when clicked opens a modal. Is there anyway to make it only open the modal when it is toggled “on” and not appear when toggled “off”?

Dont think its possible in wappler out the box

Thanks

Wappler 5.2.1 Released
#2

So what needs to happen is when the toggle is toggled on, you click it and it opens a modal, but also on click it will toggle it off - is that what you need?

#3

yeah, so toggle on, it toggles it on (so value =1) and modal shows. When they toggle off (value =0) no modal shows (as it would just repeat the same modal and be annoying. Basically a client loads a transport job, there are some options they can select when creating their booking, that can incur an additional charge, so when they toggle on to say they want that bolt on service I like to warn them it could incur a charge, if they then toggle it off I dont need to warn them again.
thanks

#4

You can do this using the onupdated event and a condition. So the code for the toggle looks like:

<div class="custom-control custom-switch">
     <input class="custom-control-input" type="checkbox" value="" id="checkbox1" name="checkbox1" dmx-on:updated="checkbox1.checked ? modal1.show() : ''">
     <label class="custom-control-label" for="checkbox1">Default switch</label>
</div>

where checkbox1 is the name of the toggle/switch and modal1 is the name of your modal

#5

thanks, will give that a go :slight_smile:

#6

worked perfectly thanks a million for that :slight_smile:

1 Like
#7

This has been improved in Wappler 5.2.1. Now there are two new dynamic events for the checkboxes - checked and unchecked, so you can run different actions depending on the checkbox status.

#8
#9

This topic was automatically closed after 45 hours. New replies are no longer allowed.