How to enable disable a select drop down list using radio buttons with angularjs?

Question

I have been searching all over for the internet looking on how to enable or disable this drop down list using radio buttons specifically when the radio button value is equal to prof the drop down list should be disabled, but with no help. I did come up with an example but didn't work. Any help would be appreciated.

registration.html

<div class="form-group">
    <label class="col-lg-2 col-md-3 control-label">Qualification</label>
        <div class="col-lg-10 col-md-9">
            <div class="radio-custom radio-inline">
                <input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
                    <label for="radio4">Educational</label>
            </div>
            <div class="radio-custom radio-inline">
                <input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
                    <label for="radio5">professional</label>
            </div>
        </div>
</div>

//This is the drop down that I need to diable

<div class="form-group">
    <label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
        <div class="col-sm-10">

            <select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
                <option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
            </select>
        </div>
</div>

This is the code I implemented to work above scenario. But didn't work :(

regController.js

$scope.$watch('QualificationDetails.qualicication_type', function (QualiType) {
            if (angular.isUndefined($scope.QualificationDetails)) {
                return;
            }
            if (QualiType === 'prof') {
                $scope.QualificationDetails.qualification_type = $scope.QualiType;
            }
            else {
                if ($scope.QualificationDetails.qualification_type !== null) {
                    $scope.QualiType = $scope.QualificationDetails.qualification_type;
                    $scope.QualificationDetails.qualification_type = null;
                }
            }
        });

the above scenario is that when it comes to qualifications if qualification type is equal to professional (prof) drop down list is disabled and when it is educational the drop down list should be enabled. Any idea on how to achieve this.

This is the Quality level json. I get it through the qualitylevel.service.

(function initController() {

    deptService.getdepts(function (res) {
        $scope.depts = JSON.parse(res.data);

    });

    qualiService.getquali(function (res) {
        console.log("inside ");
        $scope.qualiLevel = JSON.parse(res.data);
    });

    console.log("inside service");

})();

@RIYAJKHAN Also how do I clean the drop down list value once you mark prof radio button? — Ashane Alvis
– Ashane Alvis, Commented Jul 1, 2016 at 9:05

Serhii Holinei · Accepted Answer · 2016-07-01 08:01:50Z

It seems to me, that your code works fine without watcher you have added. I hope I understood what you want correctly. Try this snippet:

angular
    .module('app', [])
    .controller('Ctrl', function($scope) {
        $scope.qualiLevel = [
          {quali_level: 'A', qualification_id: 1},
          {quali_level: 'B', qualification_id: 2}
        ];
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="app">
<div ng-controller="Ctrl">
  
<div class="form-group">
    <label class="col-lg-2 col-md-3 control-label">Qualification</label>
        <div class="col-lg-10 col-md-9">
            <div class="radio-custom radio-inline">
                <input type="radio" ng-model="QualificationDetails.qualification_type" value="edu" name="radio1" id="radio4">
                    <label for="radio4">Educational</label>
            </div>
            <div class="radio-custom radio-inline">
                <input type="radio" ng-model="QualificationDetails.qualification_type" value="prof" name="radio1" id="radio5">
                    <label for="radio5">professional</label>
            </div>
        </div>
</div>

<div class="form-group">
    <label class="col-sm-2 control-label" for="Qulitype">Qualification type</label>
        <div class="col-sm-10">

            <select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type == 'prof'" ng-model="QualificationDetails.qualification" class="form-control">
                <option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
            </select>
        </div>
</div>
</div>
</div>

Also how do I clean the drop downlist value once I mark the professional radio button?
@AshaneAlvis simply change the QualificationDetails.qualification value on QualificationDetails.qualification_type change (via ng-change or $watch)
I answered the question using the $watch. Thanks for the tip. :)

Community · Accepted Answer · 2017-05-23 12:16:09Z

1

As the control is radiobutton, your QualificationDetails.qualification_type value will be set to 1 or 0 and not to the label value. You have to have different variables for two radio buttons. Based on their value you have to set QualificationDetails.qualification_type = 'prof' or something

You can also try $parent.QualificationDetails.qualification_type instead as answered in How can I get the value of the checked radio button when submitting a form using angularjs?

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jul 1, 2016 at 7:55

RajaN

536 bronze badges

Comments

Ashane Alvis · Accepted Answer · 2016-07-04 03:58:40Z

Thanks everyone for helping me out. Just felt wanted to show I implemented it correctly and other programmers to increase their knowledge. Using $watch to temporaly hide the drop down list details).

the registrationController.js

$scope.$watch('QualificationDetails.qualification_type', function (Val) {
            if (angular.isUndefined($scope.QualificationDetails))
                return;

            if (Val !== 'prof') {
                $scope.QualificationDetails.qualification = $scope.tempValue;
            }
            else {
                if ($scope.QualificationDetails.qualification !== null) {
                    $scope.tempValue = $scope.QualificationDetails.qualification;
                    $scope.QualificationDetails.qualification = null;
                }
            }
        });

Implemented through this example.

Collectives™ on Stack Overflow

How to enable disable a select drop down list using radio buttons with angularjs?

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related