AngularJSのラジオボタンを有効/無効にする

Question

私はangularjsを初めて使っていて、コードを覚えています。 3つのラジオボタンがあるセクションがあり、ラジオボタンを選択する際に他のラジオボタンを無効にしようとしています。以下は私のコード

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class='info-container-content'> 
 
    <div> 
 
    <label class="info-container-accent" aria-label="Search By Zipcode and Radius">Search By Zipcode and Radius </label> 
 
    <input type="radio" name="selectSearch" ng-model="type" /> 
 
    <input id="search-text-location" type='text' name='zip-location' ng-disabled="" aria-label="Enter Zip Code" placeholder='Enter Zip Code' ng-model="$ctrl.cservice.locsearch.ZipCode" ng-model-options="modelOptions" /> 
 
    <select name='zip-radius' aria-label="Radius from Zip Code" ng-disabled="" ng-model="$ctrl.cservice.locsearch.SearchRadius" ng-options="item as item.text for item in $ctrl.cservice.locsearch.SearchRadii track by item.value" ng-model-options="modelOptions"></select> 
 
    </div> 
 
    <br /> 
 
    <div> 
 
    <label class="info-container-accent" aria-label="Search by County">Search by County</label> 
 
    <input type="radio" name="selectSearch" ng-model="type" /> 
 
    <select name='loc-county' aria-label="County" ng-disabled="" ng-model="$ctrl.cservice.locsearch.County" ng-options="item as item.RegionName for item in $ctrl.cservice.locsearch.Counties track by item.RegionCode" ng-model-options="modelOptions"> 
 
           <option value="">Select a County</option> 
 
          </select> 
 
    </div> 
 
    <br /> 
 
    <div> 
 
    <label class="info-container-accent" class="info-container-accent" aria-label="Search by Properity Region">Search by Properity Region</label> 
 
    <input type="radio" name="selectSearch" ng-model="type" /> 
 

 
    <select name='loc-region' aria-label="Region" ng-disabled="" ng-model="$ctrl.cservice.locsearch.Region" ng-options="item as item.RegionName for item in $ctrl.cservice.locsearch.Regions track by item.RegionCode" ng-model-options="modelOptions"> 
 
           <option value="">Select a Region</option> 
 
          </select> 
 
    </div> 
 
</div>

親切に助けています。あなたが他のラジオボタンを無効にした場合は、のいずれかを選択します。

Answer 1

あなたはサンプル

var app = angular.module("app", []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 

 
    <div class='info-container-content'> 
 
    <div> 
 
     <label class="info-container-accent" aria-label="Search By Zipcode and Radius">Search By Zipcode and Radius </label> 
 
     
 
     <input type="radio" name="selectSearch" ng-model="type" ng-value="0" /> 
 
     
 
     <input id="search-text-location" type='text' name='zip-location' ng-disabled="type != 0" aria-label="Enter Zip Code" placeholder='Enter Zip Code' ng-model="$ctrl.cservice.locsearch.ZipCode" ng-model-options="modelOptions" /> 
 
     <select name='zip-radius' aria-label="Radius from Zip Code" ng-disabled="type != 0" ng-model="$ctrl.cservice.locsearch.SearchRadius" ng-options="item as item.text for item in $ctrl.cservice.locsearch.SearchRadii track by item.value" ng-model-options="modelOptions"></select> 
 
    </div> 
 
    <br /> 
 
    <div> 
 
     <label class="info-container-accent" aria-label="Search by County">Search by County</label> 
 
     <input type="radio" name="selectSearch" ng-model="type" ng-value="1"/> 
 
     <select name='loc-county' aria-label="County" ng-disabled="type != 1" ng-model="$ctrl.cservice.locsearch.County" ng-options="item as item.RegionName for item in $ctrl.cservice.locsearch.Counties track by item.RegionCode" ng-model-options="modelOptions"> 
 
           <option value="">Select a County</option> 
 
          </select> 
 
    </div> 
 
    <br /> 
 
    <div> 
 
     <label class="info-container-accent" class="info-container-accent" aria-label="Search by Properity Region">Search by Properity Region</label> 
 
     <input type="radio" name="selectSearch" ng-model="type" ng-value="2"/> 
 

 
     <select name='loc-region' aria-label="Region" ng-disabled="type != 2" ng-model="$ctrl.cservice.locsearch.Region" ng-options="item as item.RegionName for item in $ctrl.cservice.locsearch.Regions track by item.RegionCode" ng-model-options="modelOptions"> 
 
           <option value="">Select a Region</option> 
 
          </select> 
 
    </div> 
 
    </div> 
 
type is : {{type}} 
 
</div>