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

我使用

ng options

选择了一个包含多个选项的选择列表。我使用它的方式如下：

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

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

$('#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>

基文努曼
ggdfg fdgdfg
个案工作者

您需要自定义代码和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>

函数AjaxCtrl（$scope）{
$scope.countries=[‘美国’、‘加拿大’、‘墨西哥’、‘法国’]；
$scope.$watch（'country'，函数（newVal）{
if（newVal）
$scope.cities=[
{id:1，名称：'11111'}，
{id:2，name:'22222'，disabled:true}，
{id:3，名称：'33333'，禁用：true}
]
});
$scope.$watch（'city'，函数（newVal）{
if（newVal）$scope.purpose=['SOMA'，'Richmond'，'Sunset']；
});
}

面向AJAX的
国家：
选择Usacanadamexicofrance
城市：11111222233333
郊区：

我对angularjs或ng选项了解不多，但似乎其他人都使用了一些超时来让进程将接收到的数据填充到输入中，您可以像其他人一样尝试以下操作：

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

可能不太相似，但在这里看看很好：

---

@Sadikhasan抱歉，这对我没有多大帮助。我已经实现了级联下拉。你可以发布一个html生成的输出，其中也包括

选项

标记吗？你可以通过chrome开发者工具或firebug等获得它。这里是@TahaPaksu。你的答案也很有用，但为此，我必须切换到ng repeat，我目前无法更改它。感谢您的时间和正确的解决方案。@DH_uu;很高兴能帮助您

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'];
    });
}

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