启用/禁用onsen按钮

时间:2015-01-22 12:38:46

标签: javascript angularjs cordova onsen-ui

我想在其他按钮的点击事件上启用/禁用onsen按钮。 我已经使用了以下代码,但它并没有为我工作。 需要建议/更正。

 <ons-button id="save" disabled="true">Save</ons-button>
 <ons-button id="edit" ng-click ="edit_click()">Edit</ons-button>
 <ons-button id="cancel" disabled="true">Cancel</ons-button>

javascript:

function edit_click(){ 
document.getElementById("save").disabled="false";
document.getElementById("cancel").disabled="false";
}

4 个答案:

答案 0 :(得分:3)

您可以使用ngAttrDisabled指令动态禁用按钮。

<ons-button ng-attr-disabled="{{ disableButton }}">Click me!</ons-button>
<input type="checkbox" ng-model="disableButton">

不幸的是,ngDisabled<ons-button>代码的当前版本的Onsen用户界面中无效。

答案 1 :(得分:2)

您正在评估“假”string值而不是boolean值...

function edit_click(){ 
    document.getElementById("save").disabled=false;
    document.getElementById("cancel").disabled=false;
}

答案 2 :(得分:0)

在带有指令ng-disable的angularjs doc中有一个正确的例子:https://docs.angularjs.org/api/ng/directive/ngDisabled

您可以尝试使用温泉类似的:

<input type="checkbox" ng-model="checked"><br/>
<ons-button ng-model="button" disabled="{{checked}}">Button</button>

答案 3 :(得分:0)

如果您使用角度,则很容易做到且可靠。以下代码适用于我,请查看=)

<强> HTML

<ons-button modifier="outline" style="width: 100%; ng-disabled="isDisable">Print</ons-button>

<ons-button modifier="outline" style="width: 100%; ng-disabled="isDisable">Email</ons-button>

<强> JS

//to disable
$scope.isDisable = true;

//to enable
$scope.isDisable = false;