Enable and Disable drop down box using angularjs ngDisabled

In AngularJs we can able to disable or enable the dropdown like jQuery does. Using ngDisabled function in angularjs we can achive the functionality. Demo will be available at end of the tutorial.

You might also like

Iterate javascript object keys using angularjs ngRepeat

October 27, 2020

0

Select all and Deselect all checkboxes in angularjs

October 22, 2021

0

Let’s start the tutorial

AngularJs ng-disabled

Add HTML code

<div class="well" ng-controller="appCtrl">
  <input type="checkbox" ng-model="checked" ng-change="toggleDisablingDropdown()">
  <select name="select" ng-disabled="isDisable">
      <option value="item1">item1</option>
      <option value="item2">item2</option> 
  </select>
</div>

Above code has drop down with checkbox. When check box checked or unchecked the dropdown will be disabled or enabled. Model “checked” id for checkbox and model isDisable for dropdown list.

Add below Angularjs

var app = angular.module('angularDemo', [
  'ngRoute'
]);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    // Home
    .when("/", {templateUrl: "partials/main.html", controller: "appCtrl"})
    // else Home
    .otherwise("/", {templateUrl: "partials/main.html", controller: "appCtrl"});
}]);

app.controller('appCtrl', function($scope) {
    $scope.toggleDisablingDropdown = function(){
    	$scope.isDisable = $scope.checked;
    };
});

Demo