Prevent check of checkbox until function has been called

311 Views Asked by At

We are using AngularJS, and we require to run a function that determines whether or not the checkbox the user clicked on is actually checked. I have tried to pass $event on ngChange, but discovered it is unable to pass the $event object. The reason I want to access the $event object is so I could prevent the default behaviour until the required function has been called.

The code is as follows (does not include the code where I attempted to pass $event as it didn't work):

<label for="specificCase">
    Yes
    <input 
        type="checkbox" 
        name="specificCase" 
        data-ng-click="specificCase.no = false; specificCase.unsure = false;" 
        data-ng-model="specificCase.yes" 
        data-ng-change="$ctrl.specificCaseCheck('yes', specificCase.yes)">
</label>
<label for="notSpecificCase">
    No
    <input 
        type="checkbox" 
        name="notSpecificCase" 
        data-ng-click="specificCase.yes = false; specificCase.unsure = false;" 
        data-ng-model="specificCase.no" 
        data-ng-change="$ctrl.specificCaseCheck('no', specificCase.no)">
</label>

controller

function specificCaseCheck(value, boolean) {

     //HERE I WANT TO PREVENT THE DEFAULT BEHAVIOUR OF THE CHECKBOX CHECKING

    vm.optionSelected = !boolean ? false : true;
    vm.caseSpecific = value == 'yes' && boolean ? true : false;
}

Question

How do I keep the checkbox unchecked until I have run a function in the controller?

1

There are 1 best solutions below

0
Mauricio Gracia Gutierrez On

Since you need to prevent default behavior but dont have the event you can follow the approach of this question Angular 2 Checkbox preventDefault

Basically you need to return false in your event handler to prevent the default behavior of "checking the checkbox when is clicked" then you can click it programatically

For that you can check this question Angular 4 checkbox set programmatically