How do I reverse a checkbox state to make it unchecked (AngularJS)?

Question

I basically want that when the user clicks on a checkbox, their decision is immediately reversed and the checkbox is unchecked. The code below is not working. I tried other variations like value = !value instead of value = false and tried initializing another controller variable to be equal to the checkbox variable and changing the other controller variable. None of this works; basically, I cannot set the checkbox state unless the application is first being initialized.

HTML code:

<input type="checkbox" ng-model="avariabledefinedincontroller" ng-click="changemystate(avariabledefinedincontroller)">

Controller code:

$scope.avariabledefinedincontroller = false;


$scope.changemystate = function(value){
  if (value == true) {
    value = false;

 }

 else {
   value = value;
 }

};

avariabledefinedincontroller will automatically goes to true or false. Why you want a function to that. — Alaksandar Jesus Gene
– Alaksandar Jesus Gene, Commented Mar 18, 2015 at 18:37
If you want to prevent the user from using the checkbox, why not just disable it? — JLRishe
– JLRishe, Commented Mar 18, 2015 at 18:38
use ng-checked="scopevar" ng-click="scopevar = !scopevar" and ofcourse initialize $scope.scopevar in the controller — alou
– alou, Commented Mar 18, 2015 at 18:38
My whole point is there are 6 checkboxes. On clicking the 5th, it should be unchecked. I have detailed code for that. Should I repost with all the code with all the checkboxes mentioned? It is important that the scope variable should be changed by the value passed in. — angularjslearner66
– angularjslearner66, Commented Mar 18, 2015 at 18:47

JLRishe · Accepted Answer · 2015-03-18 18:47:32Z

2

The value passed into changemystate will be the value the checkbox has when it is clicked. So if you want it to stay at that value, you can set up a timeout to restore it to that value. No negation is needed.

Also, assigning a value to value will do nothing. You have to modify the scope variable. If you want to identify the scope variable for the item that was clicked, you can pass in a string:

function MyController($scope, $timeout) {
  $scope.mybool = false;

  $scope.changemystate = function(key) {
     var value = $scope[key];
     $timeout(function () {
         $scope[key] = value;
     }, 0);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="" ng-controller="MyController">
  <input type="checkbox" ng-model="mybool" ng-click="changemystate('mybool')" />
  {{mybool}}
</div>

edited Mar 18, 2015 at 18:47

answered Mar 18, 2015 at 18:32

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

angularjslearner66 Over a year ago

You are right about the scope variable, but the problem is I have 6 checkboxes and want the 5th one checked (only 4 at a time). I shared only general code here. If a value passed in can be changed, that is my goal.

Michel · Accepted Answer · 2015-03-18 21:45:20Z

Actually, you don't need a function for that :

In the template :

<input type="checkbox" ng-model="avariabledefinedincontroller" />

And in the controller, you'll have just the variable :

// Default state
$scope.avariabledefinedincontroller = false;

Fiddle

Edit : The purpose of this question was actually to prevent the user to check a checkbox, but without disabling the checkbox. For that, @JLRishe's answer addresses well the problem, though I would personally add the state value to set as an argument to setState :

angular.module('demoApp', []).controller('DemoController', function($scope, $timeout) {
  $scope.myVar = false;

  $scope.setState = function (varName, val) {
    $timeout(function() {
        $scope[varName] = val;  
    }, 0);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="demoApp" ng-controller="DemoController">
  <input type="checkbox" ng-model="myVar" ng-click="setState('myVar', false)" />
  {{myVar}}
</div>

Dragomir Răzvan · Accepted Answer · 2015-03-18 18:36:50Z

0

VYou can also use a short-hand:

<input type="checkbox" ng-model="avariabledefinedincontroller" ng-click="aVariable = !aVariable"/>

answered Mar 18, 2015 at 18:36

Dragomir Răzvan

5922 silver badges5 bronze badges

Comments

JackDev · Accepted Answer · 2017-03-09 14:16:08Z

0

There are a number of options available to you, but just in case this can help someone, I did two things.

I passed the $event in so that I could run event.preventDefault() (so it wont get checked)
1. ng-click="changemystate($event, avariabledefinedincontroller)">
2. In $scope.changemystate() I then added the event param, and called event.preventDefault()
Secondly, I then just added a return so that the method terminates, so there is no need to roll back the value, because it prevents it from being updated in the first place.

answered Mar 9, 2017 at 14:16

JackDev

5,1121 gold badge42 silver badges50 bronze badges

Collectives™ on Stack Overflow

How do I reverse a checkbox state to make it unchecked (AngularJS)?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related