CODEWITHSUNDEEP
javascriptangularjsinputradio-button
tiktak
tiktak

Reputation: 1811

Angularjs: Handle click on disabled radio

I would like to handle clicks on disabled radio button and its label using Angularjs. 

//html
<div ng-app>
  <div ng-controller="TempCtrl">
    <label data-ng-click="handleClick()">
      <input type="radio" value="1" data-ng-disabled="true">
      Value 1
    </label>
    <label data-ng-click="handleClick()">
      <input type="radio" value="2" >
      Value 2
    </label>
  </div>
</div>

//javascipt
function TempCtrl($scope) {

  $scope.handleClick = function() {
    alert('handleClick')
  };

}

Here is jsfiddle. So when user clicks on disabled radio, alert should appear. How can I do that?

Upvotes: 3

Views: 413

Answers (2)

phani indra
phani indra

Reputation: 243

See the below snippet for answer 

<html ng-app="myApp">
<head>
	<title></title>
</head>
<body ng-controller="myCtrl">
 <label for="input1" data-ng-click="handleClick('input1')">
      <input name="input1" id="input1" type="radio" value="1" data-ng-disabled="true">
      Value 1
    </label>
    <label for="input2" data-ng-click="handleClick('input2')">
      <input name="input2" id="input2" type="radio" value="2" >
      Value 2
    </label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);

app.controller('myCtrl', ['$scope', function ($scope) {
 $("#input1").prop('disabled',true).css('pointer-events','none');
$scope.handleClick = function(id) {
   	var disabled=$("#"+id).attr('disabled');
    if(disabled=='disabled'){
    alert("disabled")
    }
  };
}]);

</script>
</body>
</html>

Upvotes: 2

lilezek
lilezek

Reputation: 7344

According to this: Event on a disabled input

you are not able.

One approach would be to not to disable it, and set up a class:

 [class.notReallyDisabled]="w/e"

And then use CSS to change its aspect.

Upvotes: 1

Related Questions