I have a checkbox which I want to make not clickable. But it also has ng-click function attached. How to do this ?
<input id="record-2" type="checkbox" class="checkbox" ng-click="doIfChecked()">
I tried adding ng-readonly, ng-disabled but it did not work. I added css pointer-events: none but it did not work. I want this checkbox to be not clickable on boolean true/false expression. any idea?
Can you handle the condition of non-clickability inside the ng-click function? If not then:
<input ng-disabled="disableCondition" id="record-2" type="checkbox" class="checkbox" ng-click="disableCondition?(return false):doIfChecked()">
Something like above should work for you.
Explanation: If you know the condition to disable the input, then use the same condition to conditionally call the function or return false on click. Same logic can be handled in the ng-click handler too.
Here is a working sinppet
var app = angular.module("myApp", [])
app.controller("mainController", ["$scope", function($scope){
$scope.someFlag=false;
$scope.doIfChecked= function(){
$scope.someFlag=true;
}
}]);select{
width:50%;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<input id="record-2" ng-controller="mainController" type="checkbox" ng-controller="mainController" class="checkbox" ng-disabled="someFlag" ng-click="doIfChecked()">
</body> 
