Angularjs: Handle click on disabled radio

Question

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?

What exactly you need? Can you please elaborate more.. It looks interesting.. — Pankaj Parkar, Aug 09 '17 at 11:25
@PankajParkar When user clicks on disabled radio button and input, notice should be displayed. When user clicks on not disabled radio, some calculations are performed. All the logic in the handleClick function. I simple left alert to simplify things. — tiktak, Aug 09 '17 at 11:29

phani indra · Answer 1 · 2017-08-23T08:30:02.920

2

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>

edited Aug 23 '17 at 08:30

answered Aug 09 '17 at 11:26

phani indra

243
1
10

Still can't see alert when click on disabled input – tiktak Aug 09 '17 at 11:27
just try the click on label – phani indra Aug 09 '17 at 11:29
In my jsfiddle alert is displayed when i click on labels. The idea is to display alert when user clicks on disabled radio button. – tiktak Aug 09 '17 at 11:30
i couldn't see any alert on your jsfiddle – phani indra Aug 09 '17 at 11:35
My fault, there was a console.log. I updated original post with link to alert version. – tiktak Aug 09 '17 at 11:39
you can not click a disable input – phani indra Aug 09 '17 at 11:43
just add $("#input1").prop('disabled',true).css('pointer-events','none'); – phani indra Aug 09 '17 at 11:43
I downvoted your answer because it didn't work. Now that it seems to be working, I cannot upvote it (unless you edit your answer). Please, add an explaination to your code and I'll change my vote. – lilezek Aug 09 '17 at 17:30
changed the answer – phani indra Aug 23 '17 at 08:31

score 1 · Answer 2 · answered Aug 09 '17 at 11:21

1

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.

answered Aug 09 '17 at 11:21

lilezek

6,976
1
27
45

In this case value will be set on input and I will need to revert it. I'm interested in more elegant solution actually. But if I dont' find anything, I'll have to go this way. – tiktak Aug 09 '17 at 11:31

Angularjs: Handle click on disabled radio

2 Answers2