So I'm modifying this widget that uses Angular

JavaScript
1

And I’m needing some insight. The overview is this. I have a widget that displays a list of computers that a person can choose. Each computer is displayed within its own accordion panel, each accordion panel has a toggle switch to select a computer.

The problem comes when there are multiple computers. I only want people the ability to select 1 computer from the list (toggle) and to disable the other toggles once one is activated. I’m not at all sure how to do this.

Here is what I’m trying to avoid:

3
3952×713 65.4 KB

I need to hide and/or disable the additional options once one (1) option is selected?

So far I believe that this is the bit of code, in the HTML part of the widget where I should make a change.

<!-- toggle -->      
<div class="inline" ng-if="::showIncludeToggle">
<div class="input-switch inline v-middle m-l" ng-click="$event.stopPropagation()" uib-tooltip="{{item.included ? '${Included}' : '${https://vt4helpdev.service-now.com}'}}" tooltip-placement="top" tooltip-append-to-body="true" role="none">
  <input type="checkbox"
      ng-model="item.included"
      tabindex="0"
      aria-label="${Included}"
      id="enable_switch_"
      ng-disabled="false" />
  <label class="switch" for="enable_switch_" ng-click="toggleItemState(item)"></label>
</div>
</div>
<!-- toggle end -->

I’ve added the ng-disabled="false " in the belief that I’ll need to somehow gather the states of all my inputs, loop through the input states, and set all inputs to ng-disabled=“true” that are not “checked” ?

An educated guess is that I should put together a function in the client portion of the widget to do this. i.e. …

$scope.lockDownInput = function() {
	$scope.includedItems.forEach(function (item) {
		
		// I know it's not item.isChecked, this is an example 
		if(item.isChecked == false){

			// Set to true, etc...
			ng-disabled="true";
		}
	});
}

// oh that it would be this easy...

And maybe call it in the HTML portion of the widget.

Advice?