diff --git a/Gruntfile.js b/Gruntfile.js index 32ab0d05..7b0c3b02 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -500,10 +500,10 @@ module.exports = function (grunt) { files: ["index.html", "bootstrap-elements.html", "testcase.html"], tasks: ["htmllint", "bootlint"] }, - //src: { - // files: '<%= jshint.core.src %>', - // tasks: ['jshint:core', 'dist-js'] // add tests when working again - //}, + src: { + files: '<%= jshint.core.src %>', + tasks: ['jshint:core', 'dist-js'] // add tests when working again + }, test: { files: ["test/**/*.js"], tasks: ["jshint:test", "jasmine"] diff --git a/less/_form.less b/less/_form.less index 1aa7fe8c..76431012 100644 --- a/less/_form.less +++ b/less/_form.less @@ -8,6 +8,11 @@ &:focus { color: @mdb-label-color-toggle-focus; } + + // correct the above focus color for disabled items + fieldset[disabled] & { + color: @mdb-label-color; + } } } diff --git a/scripts/material.js b/scripts/material.js index 6dd2682c..5dc91ded 100644 --- a/scripts/material.js +++ b/scripts/material.js @@ -20,7 +20,21 @@ } function _addFormGroupFocus(element){ - $(element).closest(".form-group").addClass("is-focused"); + var $element = $(element); + if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox?? + $element.closest(".form-group").addClass("is-focused"); + } + } + + function _toggleTypeFocus($input){ + $input.closest('label').hover(function() { + var $i = $(this).find('input'); + if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome + _addFormGroupFocus($i); // need to find the input so we can check disablement + } + }, function() { + _removeFormGroupFocus($(this).find('input')); + }); } function _removeFormGroupFocus(element){ @@ -55,10 +69,12 @@ }, "checkbox": function(selector) { // Add fake-checkbox to material checkboxes - $((selector) ? selector : this.options.checkboxElements) + var $input = $((selector) ? selector : this.options.checkboxElements) .filter(":notmdproc") .data("mdproc", true) .after(""); + + _toggleTypeFocus($input); }, "togglebutton": function(selector) { // Add fake-checkbox to material checkboxes @@ -67,12 +83,7 @@ .data("mdproc", true) .after(""); - var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group - $formGroup.find('label').hover(function() { - _addFormGroupFocus(this); - }, function() { - _removeFormGroupFocus(this); - }); + _toggleTypeFocus($input); }, "radio": function(selector) { // Add fake-radio to material radios @@ -81,13 +92,7 @@ .data("mdproc", true) .after(""); - - var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group - $formGroup.find('label').hover(function() { - _addFormGroupFocus(this); - }, function() { - _removeFormGroupFocus(this); - }); + _toggleTypeFocus($input); }, "input": function(selector) { $((selector) ? selector : this.options.inputElements) @@ -151,13 +156,6 @@ "attachInputEventHandlers": function() { var validate = this.options.validate; - // checkboxes didn't appear to bubble to the document, so we'll bind these directly - $(".form-group .checkbox label").hover(function() { - _addFormGroupFocus(this); - }, function() { - _removeFormGroupFocus(this); - }); - $(document) .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); }) .on("keydown paste", ".form-control", function(e) {