Enable/disable button if value is different than select by default

Question

I need to toggle a button state between enabled/disabled if I change the default value of a select element. Take this HTML as example:

<select 
    ng-change="statusBtn(btnUpdFee, updFee)" 
    ng-options="wt.id as wt.name for wt in wtax" 
    ng-model="updFee" 
    class="ng-pristine ng-valid"
>
    <option value="0" selected="selected">cm-534be5d66aea3</option>
    <option value="1" selected="selected">cm-534be5d681a02</option>
    <option value="2">cm-534be5d68316e</option>
</select>

<button disabled="" ng-click="showCommentModal('updateFee')" class="btn btn-success" id="btnUpdFee"><i class="icon-ok"></i></button>

And this is the code I wrote but it's not working:

$scope.statusBtn = function(btnId, curValue) {
    if (curValue != $scope.updFee) {
        $("#" + btnId).removeAttr("disabled");
    } else {
        $("#" + btnId).attr("disabled");
    }
}

What I miss?

EDIT

I made some changes and now code look like this:

<button class="btn btn-success" ng-click="showCommentModal('updateFee')" ng-disabled="!btnStatus"><i class="icon-ok"></i></button>

$scope.$watch("updFee", function(newValue, oldValue) {
    if (newValue === oldValue) {
        $scope.btnStatus = false;
    } else {
        $scope.btnStatus = true;
    }

    console.log($scope.btnStatus, newValue, oldValue);
});

And this is the output:

First Page Load (no changes): false undefined undefined
First Page Load (no changes): true 2 undefined
Changing SELECT: true 1 2
Changing SELECT again: true 3 1

But still not working, what I'm doing wrong?

tymeJV · Accepted Answer · 2014-04-15 18:54:50Z

1

Don't use jQuery to set properties like this in an Angular driven application! Use ng-disabled set to a flag. On change of your select - check what you need to and set the flag:

<button ng-disabled="isNotDefault" ng-click="showCommentModal('updateFee')" class="btn btn-success" id="btnUpdFee"><i class="icon-ok"></i></button>

$scope.statusBtn = function(btnId, curValue) {
    $scope.isNotDefault = curValue != $scope.updFee
}

answered Apr 15, 2014 at 18:54

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

7 Comments

ReynierPM Over a year ago

Still not working since button never goes back to the default state which is disabled

tymeJV Over a year ago

@ReynierPM -- You have to set the default value...the button will never be disabled since curValue will always equal updFee

ReynierPM Over a year ago

Hmmm the default value is the current selected value of the select how I setup that? I need to use the same function in four different select so I'm trying to get this generic instead of personalized

tymeJV Over a year ago

Hard code the default value - if updFee == "Default"

ReynierPM Over a year ago

Can't since values are dinamically

|

Collectives™ on Stack Overflow

Enable/disable button if value is different than select by default

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related