bootbox.js -> Показывать кнопку в bootbox.dialog(), только если условие истинно

Я использую bootbox для создания диалога, но я хочу, чтобы определенные кнопки отображались только при определенных условиях.

Я много искал, но не нашел ничего полезного..

Я определяю загрузочный ящик следующим образом:

bootbox.dialog({
   title: "title",
   message: "text",
   buttons: {
      btn1: {
         label: "Button 1",
         callback: function () {
            /* do something */                                
         }
      },
      btn2: {
         label: "Button 2",
         callback: function () {
            /* do something */                                
         }
      }       
});

Как я могу сделать так, чтобы вторая кнопка отображалась только if(condition == true)?

Я также попытался удалить кнопку после этого следующим образом:

bootbox.dialog({...})
if(!condition) {
   $('[data-bb-handler="btn2"]').remove();
}

Но безуспешно.

Любая идея оценена!

Гретц


javascript jquery bootbox
person Paco    schedule 07.04.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Просто измените объект кнопок, который вы передаете в свой загрузочный ящик, например так

  var buttons = {
    btn1: {
      label: "Button 1",
      callback: function() {
        /* do something */
      }
    },
  }

  // change here !!!    
  if (false)
    buttons.btn2 = {
      label: "Button 2",
      callback: function() {
        /* do something */
      }
    }

  bootbox.dialog({
    title: "title",
    message: "text",
    buttons: buttons
  });

Скрипт — http://jsfiddle.net/7x5h91v2/

person potatopeelings    schedule 07.04.2016

arrow_upward
0
arrow_downward

Вы можете играть с className в бутбоксе следующим образом:

var condition = false;
var displayButton="show";
if(condition){
    displayButton="hide";
}

var dialog = bootbox.dialog({
    title: "title",
    message: "text",
    buttons: {
        btn1: {
            label: "Button 1",
            callback: function() {
                /* do something */
            }
        },
        btn2: {
            className: displayButton,
            label: "Button 2",
            callback: function() {
                /* do something */
            }
        }
    }

});

Рабочий пример: https://jsfiddle.net/py6wbmvp/

person Quentin Roger    schedule 07.04.2016
comment
Спасибо, Квентин, интересный подход. Но я предпочитаю ответ #potatos, потому что кнопки вообще не генерируются, а не только скрыты. Также он немного более гибкий - person Paco; 07.04.2016