javascript - 创建带有禁用按钮的 Jquery UI 对话框

Question

我想知道是否有办法打开禁用按钮(灰显)的对话框。

$("#battleWindow").dialog({//open battling window
    title: "Battle!",
    closeOnEscape: false,
    modal: true,
    width: 500,
    buttons:[{
        text: "Cast", //creates the button
        click: function(){
            $('#battleLog').text("You cast cure!");
        }
    },
    {
        text: "Item",//creates the botton
        click: function(){
            $('#battleLog').text("You use a potion!");
        }
    },
    {
        text: "Flee",//creates the botton
        click: function(){
            $(this).dialog("close");
        }
    }]
});

Answer 1

是的，您可以通过将 disabled:true, 添加到 button(s) 属性来禁用按钮，如下面的示例所示。

$(function() {
  $("#battleWindow").dialog({ //open battling window
    title: "Battle!",
    closeOnEscape: false,
    modal: true,
    width: 500,
    buttons: [{
        text: "Cast", //creates the button
        disabled: true,
        click: function() {
          $('#battleLog').text("You cast cure!");
        }
      },
      {
        text: "Item", //creates the botton
        click: function() {
          $('#battleLog').text("You use a potion!");
        }
      },
      {
        text: "Flee", //creates the botton
        click: function() {
          $(this).dialog("close");
        }
      }
    ]
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="battleWindow"></div>
<hr/>
<div id="battleLog">Log</div>

如果您对上述源代码有任何疑问，请在下面留言，我会尽快回复您。

我希望这有帮助。快乐编码!