Disable within disabled fieldset

src/uiSelectDirective.js

@@ -70,7 +70,18 @@ uis.directive('uiSelect',
 
         attrs.$observe('disabled', function() {
           // No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
-          $select.disabled = attrs.disabled !== undefined ? attrs.disabled : false;
+          $select.disabledFlag = attrs.disabled !== undefined ? attrs.disabled : false;
+          $select.disabled = $select.disabledFlag || $select.disabledSelector;
+        });
+
+        // When inside a disabled fieldset, disabledWatch element will be disabled
+        var disabledWatch = angular.element("<input type='hidden' class='ui-select-disable-watch' aria-label=''></input>");
+        element.append(disabledWatch);
+
+        // Watch the disabled flag on disabledWatch, and set $select.disabled.
+        scope.$watch(function () { return disabledWatch.is(":disabled"); }, function (value) {
+          $select.disabledSelector = value;
+          $select.disabled = $select.disabledFlag || $select.disabledSelector;
         });
 
         attrs.$observe('resetSearchInput', function() {

test/select.spec.js

@@ -119,6 +119,8 @@ describe('ui-select tests', function() {
     );
   }
 
+
+
   function getMatchLabel(el) {
     return $(el).find('.ui-select-match > span:first > span[ng-transclude]:not(.ng-hide)').text();
   }
@@ -374,6 +376,23 @@ describe('ui-select tests', function() {
     expect(isDropdownOpened(el3)).toEqual(true);
   });
 
+  it('should be disabled when inside a disabled fieldset', function() {
+    var fieldset = angular.element("<fieldset></fieldset>");
+    var e1 = createUiSelect({theme: 'select2'});
+    var $select = e1.scope().$select;
+
+    fieldset.append(e1);
+    expect($select.disabled).toEqual(false);
+
+    fieldset.prop('disabled', true);
+    scope.$digest();
+    expect($select.disabled).toEqual(true);
+
+    fieldset.prop('disabled', false);
+    scope.$digest();
+    expect($select.disabled).toEqual(false);
+  });
+
   it('should allow decline tags when tagging function returns null', function() {
     scope.taggingFunc = function (name) {
       return null;
@@ -1221,9 +1240,9 @@ describe('ui-select tests', function() {
 
   });
 
-
   describe('multi selection', function() {
 
+
     function createUiSelectMultiple(attrs) {
         var attrsHtml = '';
         if (attrs !== undefined) {
@@ -1246,6 +1265,23 @@ describe('ui-select tests', function() {
         );
     }
 
+    it('should be disabled when inside a disabled fieldset', function() {
+      var fieldset = angular.element("<fieldset></fieldset>");
+      var e1 = createUiSelectMultiple({theme: 'select2'});
+      var $select = e1.scope().$select;
+
+      fieldset.append(e1);
+      expect($select.disabled).toEqual(false);
+
+      fieldset.prop('disabled', true);
+      scope.$digest();
+      expect($select.disabled).toEqual(true);
+
+      fieldset.prop('disabled', false);
+      scope.$digest();
+      expect($select.disabled).toEqual(false);
+    });
+
     it('should render initial state', function() {
         var el = createUiSelectMultiple();
         expect(el).toHaveClass('ui-select-multiple');