Toggle Radio buttons on click angularjs

Question

How can I toggle radio buttons lke upon clicking each one should enable the corresponding element say element and vice versa. Code that I tried:

CheckBox 1: <input type="radio" name="somethign" value="1" ng-model="checkboxSelection" ng-click="disable1='true';disable2='false'"/>

<select ng-model="something" ng-options="r.id as r.name for r in data1" ng-disabled="disable1">

CheckBox 2: <input type="radio" name="somethign" value="2" ng-model="checkboxSelection" ng-click="disable2='true';disable1='false';"/>

<select ng-model="something" ng-options="r.id as r.name for r in data2" ng-disabled="disable2">

I'm not to toggle based on the above code.Can anyone pls suggest a different alternative?Thanks

Answer 1

A cleaner implementation would be to disable the select-items depending on the selected value:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-init="checkboxSelection = 1"> <input type="radio" name="somethign" value="1" ng-model="checkboxSelection"/>First <input type="radio" name="somethign" value="2" ng-model="checkboxSelection"/>Second <br /> <select ng-model="something1" ng-disabled="checkboxSelection != 1"> <option>A</option> <option>B</option> </select> <select ng-model="something2" ng-disabled="checkboxSelection != 2"> <option>A</option> <option>B</option> </select> </div> 

Answer 2

Like Tom already mentioned (and which is the preferred way): you could just read the model value of the checkboxes and use that in your disabled attribute:

<select ng-model="something" ng-options="r.id as r.name for r in data1"    ng-disabled="checkboxSelection == 1">

Your solution (using disable variables) should work also when the variable is set as a boolean:

ng-click="disable1=true;disable2=false"

Or, the other way around, adjust your ng-disabled to explicitly check the string value like this:

ng-disabled="disable1==='true'"