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

What if you change the ng-disabled to ng-disabled="checkboxSelection == 1" — TMH
– TMH, Commented Feb 16, 2015 at 10:18

boindiil · Accepted Answer · 2015-02-16 10:23:50Z

2

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>

answered Feb 16, 2015 at 10:23

boindiil

5,8652 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niels Boogaard · Accepted Answer · 2015-02-16 10:30:18Z

0

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

answered Feb 16, 2015 at 10:30

Niels Boogaard

1161 silver badge5 bronze badges

Collectives™ on Stack Overflow

Toggle Radio buttons on click angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related