NeX NeX - 5 months ago 25
AngularJS Question

Disable an input field with a checkbox and dropdown selection

I have 3 total fields for this. The first is a checkbox. When it is selected the input field should be activated. The second is a dropdown where when a certain selection is selected, the input field should be activated. The third field is the actual input field that needs to only be activated when the checkbox is checked and the dropdown has the certain selection.

<input type="checkbox" ng-model="checkValue">
<select name="select" ng-model="selectValue">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
</select>
<input type="text" ng-model="inputValue" ng-disabled="!checkbox && selectValue != 'option-1'">

Don Don
Answer

you are right in comment , it was bypassing your selectbox model in check. Below thing worked for me in fidde.

<input type="text" ng-model="inputValue" ng-disabled="(!checkValue) || (checkValue && selectValue == undefined)">

Check fiddle at : http://jsfiddle.net/Lvc0u55v/5106/

More robust scenarios can be added by adding a scope function which controls the state of input box.

<input type="text" ng-model="inputValue" ng-disabled="(!checkValue) || (checkValue && setInputState(selectValue))">

  $scope.setInputState= function(input){
    var state= false;
    if(input === undefined || input != 'option-1'){
        state = true;
    }
    return state;
   }
Comments