#2434 - Checkbox no longer need any init/for to work

src/definitions/modules/checkbox.js

@@ -56,14 +56,13 @@ $.fn.checkbox = function(parameters) {
         initialize: function() {
           module.verbose('Initializing checkbox', settings);
 
-          module.fix.input();
-
           module.create.label();
           module.bind.events();
+
           module.set.tabbable();
+          module.hide.input();
 
           module.observeChanges();
-
           module.instantiate();
           module.setup();
         },
@@ -85,9 +84,10 @@ $.fn.checkbox = function(parameters) {
         },
 
         fix: {
-          input: function() {
+
+          reference: function() {
             if( $module.is(selector.input) ) {
-              module.debug('Fixing incorrect reference to module in invocation');
+              module.debug('Behavior called on <input> adjusting invoked element');
               $module = $module.closest(selector.checkbox);
               module.refresh();
             }
@@ -126,6 +126,13 @@ $.fn.checkbox = function(parameters) {
           $input = $module.children(selector.input);
         },
 
+        hide: {
+          input: function() {
+            module.verbose('Modfying <input> z-index');
+            $input.addClass(className.hidden);
+          }
+        },
+
         observeChanges: function() {
           if('MutationObserver' in window) {
             observer = new MutationObserver(function(mutations) {
@@ -675,6 +682,7 @@ $.fn.checkbox.settings = {
     checked       : 'checked',
     indeterminate : 'indeterminate',
     disabled      : 'disabled',
+    hidden        : 'hidden',
     radio         : 'radio',
     readOnly      : 'read-only'
   },

src/definitions/modules/checkbox.less

@@ -30,27 +30,26 @@
 .ui.checkbox {
   position: relative;
   display: inline-block;
+  backface-visibility: hidden;
+  outline: none;
+  vertical-align: baseline;
 
   min-height: @checkboxSize;
-
-  font-size: 1rem;
+  font-size: @medium;
   line-height: @checkboxLineHeight;
   min-width: @checkboxSize;
-  backface-visibility: hidden;
-
-  outline: none;
-  vertical-align: baseline;
 }
 .ui.checkbox input[type="checkbox"],
 .ui.checkbox input[type="radio"] {
+  cursor: pointer;
   position: absolute;
   top: 0px;
   left: 0px;
-  width: @checkboxSize;
-  height: @checkboxSize;
   opacity: 0 !important;
   outline: none;
-  z-index: -1;
+  z-index: 3;
+  width: @checkboxSize;
+  height: @checkboxSize;
 }
 
 
@@ -253,6 +252,18 @@
   color: @disabledCheckboxLabelColor;
 }
 
+/*--------------
+     Hidden
+---------------*/
+
+/* Initialized checkbox moves input below element
+ to prevent manually triggering */
+.ui.checkbox input[type="checkbox"].hidden,
+.ui.checkbox input[type="radio"].hidden {
+  z-index: -1;
+}
+
+
 
 /*******************************
              Types

src/themes/default/modules/checkbox.variables

@@ -6,6 +6,7 @@
 @checkboxColor: @textColor;
 @checkboxLineHeight: @checkboxSize;
 
+
 /* Label */
 @labelDistance: 1.85714em; /* 26px @ 14/em */