Angularjs：处理单击禁用的无线电

Question

I would like to handle clicks on disabled radio button and its label using Angularjs. 我想使用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 . 这是jsfiddle 。 So when user clicks on disabled radio, alert should appear. 因此，当用户点击禁用的无线电时，应显示警报。 How can I do that? 我怎样才能做到这一点？

Answer 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. 然后使用CSS来改变它的方面。

Answer 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>

Angularjs：处理单击禁用的无线电

问题描述

2 个解决方案

解决方案1
1 2017-08-09 11:21:17

解决方案2
1 2017-08-09 11:26:15

Angularjs：处理单击禁用的无线电

问题描述

2 个解决方案

解决方案1 1 2017-08-09 11:21:17

解决方案2 1 2017-08-09 11:26:15

解决方案1
1 2017-08-09 11:21:17

解决方案2
1 2017-08-09 11:26:15