问题描述
我想在 ajax 调用成功后切换按钮的 disabled 属性。
该按钮正在对后端进行 ajax 调用，如果返回成功，我必须禁用该特定按钮。
我有 n 个按钮，因为它们是在 foreach 循环中为表格行生成的。
...
<td>
<button class="button primary" data-bind="click: $parent.sendDataToApi,attr: {'disabled' : passedIntegration },style: { background: passedIntegration ? 'gray' : '' }">Send button</button>
</td>
...
我的问题是，我是否需要为每个按钮 id 选择器放置，或者敲除以某种方式“知道”哪个按钮被调用 ajax，并且只有那个按钮可以禁用并将颜色更改为灰色？
我的 Knockout.js 文件看起来像：
define(['viewmodels/shell','durandal/services/logger','plugins/dialog','viewmodels/shell','toastr','knockout','kovalidationconfig','plugins/router','typeahead.bundle'],function (shell,logger,dialog,shell,toastr,ko,kvc,router,typeahead) {
var vm = {
activate: activate,shell: shell,data: ko.observableArray([]),close: function () {
$(window).off('popstate',vm.goBack);
$(window).off('resize',adjustModalPosition);
dialog.close(vm,'cancel');
},goBack: function () {
$(window).off('popstate','back');
},editPreregisteredChildren: function () {
router.navigate("#/function/" + this.id);
},sendDataToApi: function () {
$.ajax({
type: "POST",url: rootUrl + 'home/sendData',data: ko.toJSON({
requestId: this.id
}),contentType: "application/json; charset=utf-8",dataType: "json",success: function (data) {
if (data.success === true) {
toastr.success(data.message)
// set that specific button disabled,remove hand-cursor,change background color to gray
} else {
toastr.error(data.message);
}
}
});
}
};
);
如您所见，我完成了 GET 部分，在加载行时，我设置了禁用/启用按钮，但我还没有弄清楚如何删除禁用按钮上的手形光标？
我坚持其他部分，当我进行ajax调用时，如果调用成功，我还需要禁用按钮。 任何建议如何做到这一点？
解决方法
有几种方法可以处理它。您没有发布您在 forEach 循环中使用的变量，但这取决于它。我将假设它是“数据”observableArray。
因此，如果“data”是一个对象数组，您可以向其添加一个可观察的属性，然后将禁用绑定到该属性。
data = [{property: ...,disable: ko.observable()}]
然后您可以通过向方法添加参数将您所在的数组对象传递给方法，如下所示：
sendDataToApi: function (e) {
并将绑定更改为：
data-bind="click: $parent.sendDataToApi($data),disable: disable"
这将使方法中的“e”成为您当前所在的迭代，然后您可以在适当的时候更改 set e.disable(true)。