Reset radio buttons when unchecking checkbox in AngularJS

Question

In the example above, the radio buttons below the checkbox are activated when the checkbox is checked. I'd like to reset the radio buttons (so that no radio button is filled) when unchecking this checkbox.

<div class="checkbox checkbox-info">
  <input id="icb" type="checkbox" ng-model="checked">
  <label for="icb"><i class="fa fa-refresh">&nbsp;</i><b>Integratie</b></label>
</div>
<div class="radio">
  <input type="radio" name="irb" id="iarb" ng-disabled="!checked" value="!checked">
  <label for="iarb">Administrator</label>
</div>
<div class="radio">
  <input type="radio" name="irb" id="imrb" ng-disabled="!checked" value="!checked">
  <label for="imrb">Medewerker</label>
</div>

Maxim Shoustin · Accepted Answer · 2017-04-30 14:53:11Z

1

Change radio button value to ng-model

HTML

<div class="checkbox checkbox-info">
      <input id="icb" type="checkbox" ng-model="checked" ng-click="onCheck()">
      <label for="icb"><i class="fa fa-refresh">&nbsp;</i><b>Integratie</b></label>
</div>

    <div class="radio">
      <input type="radio" name="irb" id="imrb" ng-model="radio_checked" value="1" ng-disabled="!checked" />

      <label for="iarb">Administrator</label>
    </div>
    <div class="radio"> 
    <input type="radio" name="irb" id="imrb" ng-model="radio_checked" value="2" ng-disabled="!checked" />

      <label for="imrb">Medewerker</label>
    </div>

JS

$scope.onCheck = function(){
    $scope.radio_checked = false;    
 }

Demo Fiddle

answered Apr 30, 2017 at 14:53

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

1 Comment

RobVH Over a year ago

Follow-up question: what do I need to add so that the first radio button is selected when the checkbox is checked?

Collectives™ on Stack Overflow

Reset radio buttons when unchecking checkbox in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related