CODEWITHSUNDEEP
angularjs
jack
jack

Reputation: 183

how to disable drop down when checkbox is unchecked in angular js

Hi I am new to angular js. I want to know how to disable drop down when checkbox is unchecked in angular js.this is the code i have been trying...

Click me: 

<input type="checkbox" ng-model="checked"><br/>
<div>
<div class="check-element animate-hide" ng-show="checked">

 <select ng-model="myDropDown">
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
</select>

Upvotes: 1

Views: 7138

Answers (3)

Unome
Unome

Reputation: 6900

So, this is a real quick example. Below I have a select box. You can use ng-disabled="EXPRESSION" to dynamically disable stuff.

  <select ng-model="dropdown" ng-options="item.name for item in dropdown" ng-disabled="!checked">
  <input type="checkbox" ng-model="checked">

Just set the expression to check the variable that is true/false on your checkbox. When it is false (unchecked) your dropdown will be disabled

Upvotes: 0

Brocco
Brocco

Reputation: 65023

By having checked defined as your checkbox's model you can just that to control whether the select (drop down) is disabled using that variable on your controller's scope.

<select ng-model="myDropDown" ng-disabled="!checked">

make sure you use the negation of checked since you want it to be disabled when the checkbox is not checked.

PLNKR example

Upvotes: 3

tymeJV
tymeJV

Reputation: 104785

You can do:

<select ng-model="myDropDown" ng-disabled="!checked">

Use ng-disabled conditionally on if the ng-model for your checkbox is true or false

Upvotes: 1

Related Questions