如果值不同于默认选择,则启用/禁用按钮



如果更改select元素的默认值,我需要在启用/禁用之间切换按钮状态。以这个HTML为例:

<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>

这是我写的代码,但它不起作用:

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

我想念什么?

编辑

我做了一些更改,现在代码看起来像这样:

<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);
});

这就是输出:

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

但仍然没有工作,我做错了什么?

不要在Angular驱动的应用程序中使用jQuery来设置这样的属性!使用设置为标志的ng-disabled。在selectchange上,检查您需要什么并设置标志:

<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
}

最新更新