CODEWITHSUNDEEP
javascriptangularjsradio-button
forgottofly
forgottofly

Reputation: 2719

Toggle Radio buttons on click angularjs

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

Upvotes: 0

Views: 3658

Answers (2)

Niels Boogaard
Niels Boogaard

Reputation: 116

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

Upvotes: 0

boindiil
boindiil

Reputation: 5865

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>

Upvotes: 2

Related Questions