Disable Input field according to select option value Angularjs

Question

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 have included only the relevant code)

<html ng-app="abc">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-controller="abcd">
        <select ng-model="paperSelection" ng-init="paperSelection='1191'">
        <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>
  </body>

</html>

This is my relevant script part.

angular.module('abc', []);

controller('abcd', function ($scope) {

  if ($scope.paperSelection == 377.95) {
    $scope.disableInputs === true;
  }
  else 
    $scope.disableInputs ===false;
}
);

This isn't working. I couldn't find out what's the problem with this.

Can anyone please help me with this.

Raman Sahasi · Accepted Answer · 2017-03-15 03:56:00Z

2

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

answered Mar 15, 2017 at 3:56

Raman Sahasi

32.1k9 gold badges63 silver badges74 bronze badges

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

1 Comment

Thidasa Pankaja Over a year ago

Thanks a lot ! This helps :)

Sachila Ranawaka · Accepted Answer · 2017-03-15 03:53:05Z

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>

Collectives™ on Stack Overflow

Disable Input field according to select option value Angularjs

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related