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

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>

​

如果你对上面的源代码有任何疑问，请在下面留下评论，我会尽快回复你。

我希望这能帮到你。编码愉快！