CODEWITHSUNDEEP
jqueryknockout.js
user2884789
user2884789

Reputation: 533

How can I disable/enable a button in a bootbox dialog box

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

Upvotes: 1

Views: 7377

Answers (3)

Romeu Oliveira
Romeu Oliveira

Reputation: 1

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

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

The save className button will appear in the list; ex: '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.

Upvotes: 0

Uncle Dan
Uncle Dan

Reputation: 3290

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

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

Upvotes: 0

user2884789
user2884789

Reputation: 533

Figured it out:

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

where btn-save is the className of the button.

Upvotes: 2

Related Questions