Disable optgroup of multiple select which has specific label

Question

I have taken a select list with multiple option using ng-options. I am using it as below:

<select ng-options="c as c.Text for c in ReceiverList track by c.Value" ng-model="ReceiverUserID" class="form-control" id="ddlReceiverUserID" ng-change="GetWorkers(ReceiverUserID, SenderUserID,'receiver')">
   <option value="">--Select Supervisor--</option>
</select>       <!-- Parent Drop Down-->

<select multiple ng-options="c as c.Text group by c.Group 
        for c in receiveList track by c.Value" ng-model="Workers" 
        class="form-control" id="ddlWorkers" size="10">
</select>           <!-- Child Drop Down -->

This select dropdown get filled when I select some item from another dropdown.(It's a kind of cascaded dropdown). Filling it like below:

$scope.GetWorkers = function (objA, objB, ddlType) {
  $http.post("user/Workers/", { userID: objA.Value })
      .success(function (data, status, headers, config) {
          if (ddlType == 'sender') {
              $scope.sendList = data;
          } else {
              $scope.receiveList = data;
              $('#ddlWorkers optgroup[label="Current Users"] option').prop('disabled', true); // Not working
          }
      })
      .error(function (data, status, headers, config) {
          showToast(ToastType.error, "Error occured while fetching workers.", "Failure");
      });
 }

I want to disable child dropdown's specific group items. So I tried below code but it is not working:

$('#ddlWorkers optgroup[label="Current Users"] option').prop('disabled', true);

I don't know how do I disable specific group items of select whenever its data changes or new data loaded.

Here is HTML output in which I want to disable all optgroup[label="Current Users"] members:

<select multiple="" ng-options="c as c.Text group by c.Group for c in receiveList track by c.Value" ng-model="Workers" class="form-control ng-pristine ng-valid" id="ddlWorkers" size="10">
    <optgroup label="Current Users">
        <option value="4118">Kevins Numen</option>
        <option value="4119">ggdfg fdgdfg</option>
    </optgroup>
    <optgroup label="New Users">
        <option value="1093">Case Worker</option>
    </optgroup>
</select>

@Sadikhasan Sorry that's not helping me much. I have already implemented cascaded dropdown. — Dhwani, Jan 21 '15 at 10:27
can you post a generated output from your html which also includes the `option` tags inside? You can get it via chrome developer tools or firebug etc. — Taha Paksu, Jan 21 '15 at 10:30

score 1 · Answer 1 · edited May 23 '17 at 12:06

You need to customize your code and also JSON Object

 <div ng-controller="AjaxCtrl">
      <h1>AJAX - Oriented</h1>
    <div>
        Country: 
        <select id="country" ng-model="country" ng-options="country for country in countries">
          <option value=''>Select</option>
        </select>
    </div>
    <div>
        City: <select id="city" ng-disabled="!cities" ng-model="city"><option value='' ng-repeat="item in cities" ng-disabled="item.disabled">{{item.name}}</option></select>
    </div>
    <div>
        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''  ng-disabled="item.disabled" ></option></select>        
    </div>
</div>

Your Angular

function AjaxCtrl($scope) {
    $scope.countries = ['usa', 'canada', 'mexico', 'france'];
    $scope.$watch('country', function(newVal) {

        if (newVal) 
$scope.cities = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222', disabled: true },
    { id: 3, name: '33333', disabled: true }
]

    });
    $scope.$watch('city', function(newVal) {
        if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
    });
}

function AjaxCtrl($scope) {
    $scope.countries = ['usa', 'canada', 'mexico', 'france'];
    $scope.$watch('country', function(newVal) {
       
        if (newVal) 
$scope.cities = [
    { id: 1, name: '11111'},
    { id: 2, name: '22222', disabled: true },
    { id: 3, name: '33333', disabled: true }
]

    });
    $scope.$watch('city', function(newVal) {
        if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
    });
}

<link href="http://fiddle.jshell.net/css/normalize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<div ng-controller="AjaxCtrl" class="ng-scope">
      <h1>AJAX - Oriented</h1>
    <div>
        Country: 
        <select id="country" ng-model="country" ng-options="country for country in countries" class="ng-valid ng-dirty"><option value="" class="">Select</option><option value="0">usa</option><option value="1">canada</option><option value="2">mexico</option><option value="3">france</option></select>
    </div>
    <div>
        City: <select id="city" ng-disabled="!cities" ng-model="city" class="ng-valid ng-dirty"><!-- ngRepeat: item in cities --><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding">11111</option><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding" disabled="disabled">22222</option><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding" disabled="disabled">33333</option></select>
    </div>
    <div>
        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs" class="ng-pristine ng-valid" disabled="disabled"><option value="" ng-disabled="item.disabled" class=""></option></select>        
    </div>
</div>

Reference

Your answer is also useful but for that I have to switch to ng-repeat and i currently cant change it. Thanks for your time and right solution. — Dhwani, Jan 22 '15 at 05:17

score 1 · Accepted Answer · edited May 23 '17 at 12:06

I don't know much about angularjs or ng-options, but it seems that everybody else used some timeout to let the process populate the received data to the input, and you can try something this like others:

... 
} else {
    $scope.receiveList = data;
    setTimeout(function(){        
        $('#ddlWorkers optgroup[label="Current Users"] option')
          .prop('disabled', true); // Not working
    }, 100);
}
...

maybe not similar but good to have a look here:

is there a post render callback for Angular JS directive?

Disable optgroup of multiple select which has specific label

2 Answers2