OK, Let me simplify. So in a sense, this is what I'm trying to do: *AngularJS ng-disabled <https://www.encodedna.com/angularjs/tutorial/enable-disable-checkbox-on-dropdown-selection-in-angularjs.htm>*
Except, instead of having a select box that chooses which value causes the check-boxes to be disabled, the act of selecting one of the check-boxes disables the others. code: *<html><head> <title>Enable/Disable Checkbox on Dropdown Selection - AngularJS Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js";></script></head><body> <div ng-app="myApp" ng-controller="myController"> <!--THE SELECT ELEMENT.--> <select ng-model="item" ng-options="prod.name for prod in products" ng-change="updateCheckBox()" id="prod"> <option value="">-- Select --</option> </select> <p> <!--BY DEFAULT, ALL CHECKBOXES REMAINS DISABLED.--> <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk1" /> Exchange Offer <br /> <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk2" /> Gift Voucher <br /> <input type="checkbox" name="offer" ng-disabled="!enableMe" id="chk3" /> Free UPS </p> </div></body><script> angular.module("myApp", []) .controller('myController', ['$scope', function ($scope) { // CREATE A "products" OBJECT (JSON). $scope.products = [ { 'name': 'HP' }, { 'name': 'IBM' }, { 'name': 'Lenovo' } ]; $scope.updateCheckBox = function () { // I HAVE SET CONDITION TO CHECK IF SELECTED PRODUCT IS "IBM", // THEN ENABLE ALL CHECKBOXES OR ELSE DISABLE ALL. if ($scope.item != null) { if ($scope.item.name == "IBM") $scope.enableMe = true; else $scope.enableMe = false; } else $scope.enableMe = false; }; } ]);</script></html>* Has anyone else had to do such witchcraft? Any advice would be appreciated. On Thursday, October 10, 2019 at 9:31:36 AM UTC-7, Eric Gilmore wrote: > > I have this widget that's to be used to select computers for order. What > I'm attempting to do is to disable or hide other options, once (1) option > is selected. Additionally, if the item selected is UN-selected, I want it > to go back to the starting state. > > So, here we have the initial state of the options: > [image: image] > > Here is what we get when on is selected: > [image: image] > > And here is what I'm trying to avoid, more than one selection: > [image: image] > > How can I hide and/or disable the additional options once one (1) option > is selected? > > So far I believe that this bit of code in the HTML part of the widget is > 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://some-instance.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="disableME" /> > <label class="switch" for="enable_switch_" > ng-click="toggleItemState(item)"></label> > </div> > </div> > <!-- toggle end --> > > > I've added the *ng-disabled="disableME**" *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.disableME = "false"; > $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... > $scope.disableMe="true"; > } > }); > } > > > > Or modify the toggleItemState() function in some way to add this > functionality: > $scope.toggleItemState = function(item) { > if(item.included) { > $scope.totalIncluded--; > angular.element('#item_details_' + item.sys_id).find('a[href], area[href], > input:not([disabled]), select:not([disabled]), textarea:not([disabled]), > button:not([disabled]), iframe, object, embed, *[tabindex], > *[contenteditable]').attr('tabindex', -1); > } > else { > $scope.totalIncluded++; > angular.element('#item_details_' + item.sys_id).find('a[href], area[href], > input:not([disabled]), select:not([disabled]), textarea:not([disabled]), > button:not([disabled]), iframe, object, embed, *[tabindex], > *[contenteditable]').removeAttr('tabindex'); > } > } > > Any advice would be appreciated. I'm a noob with Angular. > > > -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/angular/866f914f-3375-4922-bfe9-4cdf9dc21620%40googlegroups.com.
