Fixing some conditions with checkbox double firing #2440

src/definitions/modules/checkbox.js

@@ -140,6 +140,13 @@ $.fn.checkbox = function(parameters) {
         },
 
         event: {
+          click: function(event) {
+            if( $(event.target).is(selector.input) ) {
+              module.verbose('Using default check action on initialized checkbox');
+              return;
+            }
+            module.toggle();
+          },
           keydown: function(event) {
             var
               key     = event.which,
@@ -200,7 +207,7 @@ $.fn.checkbox = function(parameters) {
 
         can: {
           change: function() {
-            return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') );
+            return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') );
           },
           uncheck: function() {
             return (typeof settings.uncheckable === 'boolean')
@@ -337,7 +344,7 @@ $.fn.checkbox = function(parameters) {
           events: function() {
             module.verbose('Attaching checkbox events');
             $module
-              .on('click'   + eventNamespace, module.toggle)
+              .on('click'   + eventNamespace, module.event.click)
               .on('keydown' + eventNamespace, selector.input, module.event.keydown)
             ;
           }
@@ -358,12 +365,16 @@ $.fn.checkbox = function(parameters) {
 
         check: function() {
           module.debug('Enabling checkbox', $input);
+          module.set.input.determinate();
           module.set.input.checked();
+          module.set.determinate();
           module.set.checked();
         },
 
         uncheck: function() {
           module.debug('Disabling checkbox');
+          module.set.input.determinate();
+          module.set.determinate();
           module.set.input.unchecked();
           module.set.unchecked();
         },

src/definitions/modules/checkbox.less

@@ -46,6 +46,8 @@
   position: absolute;
   top: 0px;
   left: 0px;
+  width: @checkboxSize;
+  height: @checkboxSize;
   opacity: 0 !important;
   outline: none;
   z-index: -1;
@@ -59,11 +61,14 @@
 
 .ui.checkbox .box,
 .ui.checkbox label {
+  position: relative;
   display: block;
   cursor: pointer;
   padding-left: @labelDistance;
   outline: none;
 }
+
+.ui.checkbox .box,
 .ui.checkbox label {
   font-size: @fontSize;
 }
@@ -72,9 +77,10 @@
 .ui.checkbox label:before {
   position: absolute;
 
-  line-height: 1;
-  width: @checkboxSize;
-  height: @checkboxSize;
+  line-height: @checkboxCheckLineHeight;
+
+  width: 17px;
+  height: 17px;
   top: 0em;
   left: 0em;
   content: '';
@@ -93,12 +99,14 @@
 .ui.checkbox .box:after,
 .ui.checkbox label:after {
   position: absolute;
+  font-size: @checkboxCheckFontSize;
   top: @checkboxCheckTop;
   left: @checkboxCheckLeft;
-  line-height: @checkboxSize;
-  width: @checkboxSize;
-  height: @checkboxSize;
+  line-height: @checkboxCheckLineHeight;
+  width: @checkboxCheckSize;
+  height: @checkboxCheckSize;
   text-align: center;
+  vertical-align: middle;
 
   opacity: 0;
   color: @checkboxColor;
@@ -312,6 +320,14 @@
   min-height: @sliderHeight;
 }
 
+/* Input */
+.ui.slider.checkbox input[type="checkbox"],
+.ui.slider.checkbox input[type="radio"] {
+  width: @sliderWidth;
+  height: @sliderHeight;
+}
+
+/* Label */
 .ui.slider.checkbox .box,
 .ui.slider.checkbox label {
   padding-left: @sliderLabelDistance;
@@ -404,6 +420,14 @@
   min-height: @toggleHeight;
 }
 
+/* Input */
+.ui.toggle.checkbox input[type="checkbox"],
+.ui.toggle.checkbox input[type="radio"] {
+  width: @toggleWidth;
+  height: @toggleHeight;
+}
+
+/* Label */
 .ui.toggle.checkbox .box,
 .ui.toggle.checkbox label {
   min-height: @toggleHandleSize;