Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 1cae87c

Browse files
committed
fix(checkbox): prevent ng-click firing on didabled checkboxes. Fixes
1 parent 05dd565 commit 1cae87c

File tree

2 files changed

+155
-125
lines changed

2 files changed

+155
-125
lines changed

src/components/checkbox/checkbox.js

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
5454
restrict: 'E',
5555
transclude: true,
5656
require: '?ngModel',
57-
priority:210, // Run before ngAria
57+
priority: 210, // Run before ngAria
5858
template:
5959
'<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
6060
'<div class="md-icon"></div>' +
@@ -73,6 +73,14 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
7373
tAttrs.tabindex = tAttrs.tabindex || '0';
7474
tElement.attr('role', tAttrs.type);
7575

76+
// Attach a click handler in compile in order to immediately stop propagation
77+
// (especially for ng-click) when the checkbox is disabled.
78+
tElement.on('click', function(event) {
79+
if (this.hasAttribute('disabled')) {
80+
event.stopImmediatePropagation();
81+
}
82+
});
83+
7684
return function postLink(scope, element, attr, ngModelCtrl) {
7785
ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
7886
$mdTheming(element);
@@ -83,10 +91,12 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
8391
ngModelCtrl.$setViewValue.bind(ngModelCtrl)
8492
);
8593
}
94+
8695
$$watchExpr('ngDisabled', 'tabindex', {
8796
true: '-1',
8897
false: attr.tabindex
8998
});
99+
90100
$mdAria.expectWithText(element, 'aria-label');
91101

92102
// Reuse the original input[type=checkbox] directive from Angular core.
@@ -102,14 +112,18 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
102112
.on('keypress', keypressHandler)
103113
.on('mousedown', function() {
104114
scope.mouseActive = true;
105-
$timeout(function(){
115+
$timeout(function() {
106116
scope.mouseActive = false;
107117
}, 100);
108118
})
109119
.on('focus', function() {
110-
if(scope.mouseActive === false) { element.addClass('md-focused'); }
120+
if (scope.mouseActive === false) {
121+
element.addClass('md-focused');
122+
}
111123
})
112-
.on('blur', function() { element.removeClass('md-focused'); });
124+
.on('blur', function() {
125+
element.removeClass('md-focused');
126+
});
113127

114128
ngModelCtrl.$render = render;
115129

@@ -127,12 +141,18 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
127141
var keyCode = ev.which || ev.keyCode;
128142
if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
129143
ev.preventDefault();
130-
if (!element.hasClass('md-focused')) { element.addClass('md-focused'); }
144+
145+
if (!element.hasClass('md-focused')) {
146+
element.addClass('md-focused');
147+
}
148+
131149
listener(ev);
132150
}
133151
}
134152
function listener(ev) {
135-
if (element[0].hasAttribute('disabled')) return;
153+
if (element[0].hasAttribute('disabled')) {
154+
return;
155+
}
136156

137157
scope.$apply(function() {
138158
// Toggle the checkbox value...

0 commit comments

Comments
 (0)