Prevent checkbox from being checked if confirm() popup === false?

@GregWeb wrote:

I have an input toggle component which, when clicked, triggers a confirmation window. If the user clicks okay, the checked state becomes true and an action is fired. We have a css rule that when the input is checked, an animation fires.

unforunately, if the user clicks cancel, while the appropriate action fires, the css checked rule also still fires.

How can I prevent the checkbox from being checked if a user clicks cancel?

 // template.hbs
 {{input/input-toggle leftOpt="Text" rightOpt='Images' checked=(eq hooks.type 'images')}}
 
 //component.js
  toggleOpt='setHookType' items=hooks}}
     setHookType(hooks){
      if(confirm('Changing hook type will clear all hooks, continue?')) {
        this.sendAction('setHookType', hooks);
      }
    }
   
   //template.hbs
   {{leftOpt}}
     <label class="switch">
       {{input type="checkbox" change=(action 'toggleOption' items) checked=checked disabled=disabled}}
       <span data-test-input-toggle class="slider round {{class}}"></span>
     </label>
   {{rightOpt}}

   actions: {
      toggleOption(items){
         this.sendAction('toggleOpt', items)
      }
    }
  
   CSS
    input::checked + .slider::before {
        transform: translateX(26px);
    }

Posts: 1

Participants: 1

Read full topic