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.

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

CV Member since May 29, 2019

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.