Search code examples
javascriptjqueryangularjsng-options

Disable optgroup of multiple select which has specific label


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>

Solution

  • 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?