禁用具有特定标签的多个 select 的 optgroup

Question

我使用 ng-options 获取了一个包含多个选项的 select 列表。我正在使用它如下：

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

当我从另一个下拉列表中 select 一些项目时，这个 select 下拉列表被填充。（这是一种级联下拉列表）。填写如下：

$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");
      });
 }

我想禁用子下拉列表的特定组项目。所以我尝试了下面的代码，但它不起作用：

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

我不知道如何在数据更改或加载新数据时禁用 select 的特定组项目。

这是 HTML 输出，我想在其中禁用所有 optgroup[label="Current Users"] 成员：

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

Answer 1

您需要自定义代码以及 JSON 对象

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

你的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

Answer 2

我不太了解angularjs或ng-options，但似乎其他人都使用了一些超时让进程将接收到的数据填充到输入中，你可以尝试这样的事情其他：

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

可能不相似，但很高兴在这里看看：

is there a post render callback for Angular JS directive?

禁用具有特定标签的多个 select 的 optgroup

Disable optgroup of multiple select which has specific label

javascript

jquery

angularjs

ng-options