Checkbox transition fix

src/components/checkbox/checkbox.html

@@ -11,7 +11,8 @@
            [attr.aria-labelledby]="ariaLabelledby"
            (focus)="onInputFocus()"
            (blur)="onInputBlur()"
-           (change)="onInteractionEvent($event)">
+           (change)="onInteractionEvent($event)"
+           (click)="onInteractionEvent($event)">
     <div class="md-ink-ripple"></div>
     <div class="md-checkbox-frame"></div>
     <div class="md-checkbox-background">

src/components/checkbox/checkbox.scss

@@ -270,7 +270,7 @@ md-checkbox {
   opacity: 0;
   display: inline-flex;
   justify-content: center;
-  transition: background-color $md-checkbox-transition-duration
+  transition-timing-function: background-color $md-checkbox-transition-duration
                   $md-linear-out-slow-in-timing-function,
               opacity $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;
   will-change: background-color, opacity;

src/components/checkbox/checkbox.ts

@@ -258,10 +258,10 @@ export class MdCheckbox implements AfterContentInit, ControlValueAccessor {
   onInteractionEvent(event: Event) {
     // We always have to stop propagation on the change event.
     // Otherwise the change event, from the input element, will bubble up and
-    // emit its event object to the `change` output. 
+    // emit its event object to the `change` output.     
     event.stopPropagation();
 
-    if (!this.disabled) {
+    if (!this.disabled && event.type === 'change') {
       this.toggle();
     }
   }