docs(checkbox): Add an example of a checkbox that can be disabled wit…

…h javascript (#711)
material-components · Jun 1, 2017 · b27c6f0 · b27c6f0
1 parent 736866b
commit b27c6f0
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/demos/checkbox.html b/demos/checkbox.html
@@ -159,6 +159,7 @@ <h2>With Javascript</h2>
           <label for="native-js-checkbox" id="my-checkbox-label">This is my checkbox</label>
         </div>
         <button type="button" id="make-ind">Make indeterminate</button>
+        <button type="button" id="toggle-disabled">Toggle Disabled</button>
       </section>
 
       <section class="example mdc-theme--dark">
@@ -201,6 +202,10 @@ <h2>Dark Theme</h2>
         document.getElementById('make-ind').addEventListener('click', function() {
           checkboxInstance.indeterminate = true;
         });
+
+        document.getElementById('toggle-disabled').addEventListener('click', function() {
+          checkboxInstance.disabled = !checkboxInstance.disabled;
+        });
       })(this);
     </script>
   </body>

diff --git a/packages/mdc-checkbox/constants.js b/packages/mdc-checkbox/constants.js
@@ -21,6 +21,7 @@ export const cssClasses = {
   UPGRADED: 'mdc-checkbox--upgraded',
   CHECKED: 'mdc-checkbox--checked',
   INDETERMINATE: 'mdc-checkbox--indeterminate',
+  DISABLED: 'mdc-checkbox--disabled',
   ANIM_UNCHECKED_CHECKED: 'mdc-checkbox--anim-unchecked-checked',
   ANIM_UNCHECKED_INDETERMINATE: 'mdc-checkbox--anim-unchecked-indeterminate',
   ANIM_CHECKED_UNCHECKED: 'mdc-checkbox--anim-checked-unchecked',

diff --git a/packages/mdc-checkbox/foundation.js b/packages/mdc-checkbox/foundation.js
@@ -95,6 +95,11 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
 
   setDisabled(disabled) {
     this.getNativeControl_().disabled = disabled;
+    if (disabled) {
+      this.adapter_.addClass(cssClasses.DISABLED);
+    } else {
+      this.adapter_.removeClass(cssClasses.DISABLED);
+    }
   }
 
   getValue() {

diff --git a/test/unit/mdc-checkbox/foundation.test.js b/test/unit/mdc-checkbox/foundation.test.js
@@ -238,6 +238,22 @@ test('#setDisabled updates the value of nativeControl.disabled', () => {
   assert.isNotOk(nativeControl.disabled);
 });
 
+test('#setDisabled adds mdc-checkbox--disabled class to the root element when set to true', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const nativeControl = {disabled: false};
+  td.when(mockAdapter.getNativeControl()).thenReturn(nativeControl);
+  foundation.setDisabled(true);
+  td.verify(mockAdapter.addClass(cssClasses.DISABLED));
+});
+
+test('#setDisabled removes mdc-checkbox--disabled class from the root element when set to false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const nativeControl = {disabled: true};
+  td.when(mockAdapter.getNativeControl()).thenReturn(nativeControl);
+  foundation.setDisabled(false);
+  td.verify(mockAdapter.removeClass(cssClasses.DISABLED));
+});
+
 test('#isDisabled returns false when no native control is returned', () => {
   const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getNativeControl()).thenReturn(null);