Disable Input Field According To Select Option Value Angularjs

In a project, I have a dropdown menu with hard coded values and some input fields. I need to disable some of the inputs if a specific value is selected. I tried This is my code (I

Solution 1:

You're disableInputs is not changing with change in paperSelection. You have to wrap it in some kind of watch.

You can simply update disableInputs variable by adding a ng-change parameter in your select, something like this:

<select ng-model="paperSelection" ng-init="paperSelection='1191'" ng-change="disableInputs = (paperSelection == 377.95)">

---

Here is a working plunker

https://plnkr.co/edit/qTNd7ipZ6EzVisNDNoIq?p=preview

Solution 2:

create a function in ng change and from that based on the condition make the input disable or not. Here is sample demo

also change the $scope.disableInputs === true; to $scope.disableInputs = true; as mention by the @maximedubois

angular.module("app",[])
.controller("ctrl",function($scope){

if ($scope.paperSelection == 377.95) {
    $scope.disableInputs = true;
  }
  else 
    $scope.disableInputs =false;
    
$scope.selectChange = function(){
  switch($scope.paperSelection){
    case '1700' : 
      $scope.disableInputs = true;
      break;
    case '1191' : 
      $scope.disableInputs = false;
      break;
    default :
      console.log("no value");
  }
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
        <select ng-model="paperSelection" ng-init="paperSelection='1191'" ng-change="selectChange()">
        <option value="1700">A3 Paper</option>
        <option value="1191">A4 Paper</option>
        <option value="842">A5 Paper</option>
        <option value="377.95">Barcode Sticker 3 in a row</option>
    </select>
    <p>Number Of Columns Needed : <input type="number" ng-model="numberOfColumns" placeholder="Number Of Columns" ng-disabled="disableInputs"></p>
    <p>Enter the number of Stickers : <input type="number" ng-model="numberOfStickersNeeded" placeholder="Number of Stickers"></p>
    <p>Enter Height of the Sticker (in px) : <input type="number" ng-model="heightOfSticker" placeholder="Enter Height" ng-disabled="disableInputs"></p>
 
</div>