Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I have one button called test and one drop-down menu with three values. How to enable-disable Test button according to value selected in drop down menu. Eg. If selected "Not Ready" , button should disable If selected Ready or Attention, button should enable

<div class="row">
    <div>
    <button id="testBtn" class="btn btn-default" >Test</button>
    </div>
</div>


<div class="row">
<div class="col-md-12">


    <select name="select">
        <option value="value1" selected>Not ready</option> 
        <option value="value2">Ready</option>
        <option value="value3">Attention !!</option>
    </select>


 </div>
</div>

See Plunker

share|improve this question
    
And what have you tried? Your example has neither an angular app, nor a controller. Just straight-up HTML. – Roddy of the Frozen Peas Dec 29 '15 at 21:39
    
sorry !! New to AngularJs !! – user3606556 Dec 29 '15 at 21:50
    
It's ok to be new to it. But you need to actually try to do it first instead of just asking someone else to write your code for you. – Roddy of the Frozen Peas Dec 29 '15 at 22:25
up vote 1 down vote accepted

You need an Angular app and controller. From there you can bind a model to your select, and then use an expression with the ng-disabled directive on the button to enable and disable it dynamically depending on the value in the box. See below. ng-model on the select binds it to $scope.currentState which is what I compare my literal string against in the ng-disabled directive on the button.

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

app.controller('MainCtrl', function($scope) {
  $scope.states = ['Not ready', 'Ready', 'Attention !!'];
  $scope.currentState = 'Not ready';
});
<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="row">
    <div>
      <button id="testBtn" class="btn btn-default" ng-disabled="currentState === 'Not ready'">Test</button>
    </div>
  </div>


  <div class="row">
    <div class="col-md-12">


      <select name="select" ng-model="currentState" ng-options="state as state for state in states">
      </select>


    </div>
  </div>
</body>

</html>

share|improve this answer
    
Thanks !! Code works perfect – user3606556 Dec 29 '15 at 21:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.