how to disable radio button dynamically in angularjs using ng-repeat

Question

I have developing some code in Angular JS and i need to disable radio button based on previous selection or change in text box

in JS controller:

PPCO.cusGender = [ {
id : '1',
key : 'Male',
value : 'Male',
disable:false

}, {
id : '2',
key : 'Female',
value : 'Female',
disable:false
}, {
id : '3',
key : 'TG',
value : 'TG',
disable:false
}];

PPCO.changeapplicant = function() {
switch (PPCO.p_SALUTATION.toLowerCase().trim()) {

case 'mrs.':
case 'miss.':angular.forEach(PPCO.cusGender, function(val, key) {
if(val.key != 'Male')
{
val.disable = false;
}
});
break;
}

};

in HTML:

   <input type="text" ng-model="PPCO.changeapplicant" class="color" ng-change="PPCO.changeapplicant()">

<label class="radio" ng-repeat="option in PPCO.cusGender">
    <input type="radio" name="gender"
           ng-model="PPCO.cusgendername" value="{{option.value}}" 
           ng-disabled="option.disable">
    <i></i>
    
</label>

My question is i able change the "ng-disabled =true" value but it is not enabling again. How to make that

joseglego · Accepted Answer · 2021-08-25 11:13:42Z

0

I have created this plnkr for this case: https://plnkr.co/edit/F4JZcf6Nm5Csbxbg

I think you have 2 errors happening at the same time:

You're iterating over one array. So, you don't need to use angular.forEach, you can use array.forEach
Also, most important, you're setting false when the element is mrs. or miss. and it's ok. BUT, you're not setting back to true. So, you will have to include one else clause like this:

if (['mrs.', 'miss.'].includes($scope.applicant.toLowerCase().trim())) {
  $scope.cusGender.forEach(function(element) {
    element.disable = element.key == 'Male';
  });        
} else {
  $scope.cusGender.forEach(function(element) {
    element.disable = false;
  });        
}

I think that would be all!

answered Aug 25, 2021 at 11:13

joseglego

2,1091 gold badge20 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

how to disable radio button dynamically in angularjs using ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related