diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js index cf70aa0bbe8..6001ab1a208 100644 --- a/src/components/checkbox/checkbox.js +++ b/src/components/checkbox/checkbox.js @@ -72,7 +72,7 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, function compile (tElement, tAttrs) { tAttrs.type = 'checkbox'; - tAttrs.tabIndex = 0; + tAttrs.tabindex = tAttrs.tabindex || '0'; tElement.attr('role', tAttrs.type); return function postLink(scope, element, attr, ngModelCtrl) { @@ -85,7 +85,10 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, ngModelCtrl.$setViewValue.bind(ngModelCtrl) ); } - + $$watchExpr('ngDisabled', 'tabindex', { + true: '-1', + false: attr.tabindex + }); $mdAria.expectWithText(element, 'aria-label'); // Reuse the original input[type=checkbox] directive from Angular core. @@ -113,6 +116,16 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, ngModelCtrl.$render = render; + function $$watchExpr(expr, htmlAttr, valueOpts) { + if (attr[expr]) { + scope.$watch(attr[expr], function(val) { + if (valueOpts[val]) { + element.attr(htmlAttr, valueOpts[val]); + } + }); + } + } + function keypressHandler(ev) { var keyCode = ev.which || ev.keyCode; if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) { diff --git a/src/components/checkbox/checkbox.spec.js b/src/components/checkbox/checkbox.spec.js index b1ada47dba7..533650ce044 100644 --- a/src/components/checkbox/checkbox.spec.js +++ b/src/components/checkbox/checkbox.spec.js @@ -49,7 +49,7 @@ describe('mdCheckbox', function() { expect(cbElements.eq(0).attr('role')).toEqual('checkbox'); })); - it('should be disabled with disabled attr', inject(function($compile, $rootScope) { + it('should be disabled with ngDisabled attr', inject(function($compile, $rootScope) { var element = $compile('