如何禁用/启用引导框对话框中的按钮

时间:2022-09-30 19:44:40

How can disable/enable the Save button?

如何禁用/启用“保存”按钮?

bootbox.dialog({
    message: [
    '<div class="title"'>,
    <h4>Title</h4>',
    </div>'].join(''),
    buttons: {
      label: 'Save',
      callback: function(){ // function code here  .....
      });

3 个解决方案

#1


2  

Figured it out:

弄清楚了:

$('.btn-save').prop("disabled", true);

where btn-save is the className of the button.

其中btn-save是按钮的className。

#2


0  

For those using AngularJS, here how you can disable/enable a button whenever a value is present in a text input with ng-model="name":

对于那些使用AngularJS的人,在这里如何在ng-model =“name”的文本输入中存在值时禁用/启用按钮:

var dialog = bootbox.dialog({
    title: title,
    message: '<input type="text" ng-model="name" />',
    buttons: {
        apply: {
            label: 'Apply',
            className: 'btn btn-primary apply-btn',
            callback: function() {
                // whatever
            }
        },
        cancel: {
            label: 'Cancel',
            className: 'btn btn-default',
        }
    }
});

dialog.bind('shown.bs.modal', function() {
    $applyBtn = $(this).find('.apply-btn');
    $applyBtn.attr('ng-disabled', '!name');
    $compile($applyBtn)($s);
});

#3


0  

Using web debugger (stopped on callback function) I found a solution based on user2884789's aswer:

使用web调试器(在回调函数上停止)我找到了一个基于user2884789的aswer的解决方案:

$(this).find('button');

The save className button will appear in the list; ex: 'button.btn.btn.btn-sm.btn-primary'

save className按钮将出现在列表中;例如:'button.btn.btn.btn-sm.btn-primary'

So I disabled save button in callback function:

所以我在回调函数中禁用了保存按钮:

$(this).find('button.btn.btn.btn-sm.btn-primary').prop('disabled', true);

This worked for me.

这对我有用。

#1


2  

Figured it out:

弄清楚了:

$('.btn-save').prop("disabled", true);

where btn-save is the className of the button.

其中btn-save是按钮的className。

#2


0  

For those using AngularJS, here how you can disable/enable a button whenever a value is present in a text input with ng-model="name":

对于那些使用AngularJS的人,在这里如何在ng-model =“name”的文本输入中存在值时禁用/启用按钮:

var dialog = bootbox.dialog({
    title: title,
    message: '<input type="text" ng-model="name" />',
    buttons: {
        apply: {
            label: 'Apply',
            className: 'btn btn-primary apply-btn',
            callback: function() {
                // whatever
            }
        },
        cancel: {
            label: 'Cancel',
            className: 'btn btn-default',
        }
    }
});

dialog.bind('shown.bs.modal', function() {
    $applyBtn = $(this).find('.apply-btn');
    $applyBtn.attr('ng-disabled', '!name');
    $compile($applyBtn)($s);
});

#3


0  

Using web debugger (stopped on callback function) I found a solution based on user2884789's aswer:

使用web调试器(在回调函数上停止)我找到了一个基于user2884789的aswer的解决方案:

$(this).find('button');

The save className button will appear in the list; ex: 'button.btn.btn.btn-sm.btn-primary'

save className按钮将出现在列表中;例如:'button.btn.btn.btn-sm.btn-primary'

So I disabled save button in callback function:

所以我在回调函数中禁用了保存按钮:

$(this).find('button.btn.btn.btn-sm.btn-primary').prop('disabled', true);

This worked for me.

这对我有用。