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
– Pankaj Parkar, Commented Aug 9, 2017 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
– tiktak, Commented Aug 9, 2017 at 11:29

phani indra · Accepted Answer · 2017-08-23 08:30:02Z

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, 2017 at 8:30

answered Aug 9, 2017 at 11:26

phani indra

2531 silver badge10 bronze badges

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

9 Comments

tiktak Over a year ago

Still can't see alert when click on disabled input

phani indra Over a year ago

just try the click on label

tiktak Over a year ago

In my jsfiddle alert is displayed when i click on labels. The idea is to display alert when user clicks on disabled radio button.

phani indra Over a year ago

i couldn't see any alert on your jsfiddle

tiktak Over a year ago

My fault, there was a console.log. I updated original post with link to alert version.

|

lilezek · Accepted Answer · 2017-08-09 11:21:17Z

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 9, 2017 at 11:21

lilezek

7,4552 gold badges30 silver badges47 bronze badges

1 Comment

tiktak Over a year ago

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.

Collectives™ on Stack Overflow

Angularjs: Handle click on disabled radio

2 Answers 2

9 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related