CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Chris Luna
Chris Luna

Reputation: 53

Creating a Jquery UI dialog box with disabled buttons

I would like to know if there is a way I can open the dialog box with the buttons disabled (grayed out).

$("#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");
        }
    }]
});

Upvotes: 0

Views: 683

Answers (1)

NewToJS
NewToJS

Reputation: 2772

Yes you can disable buttons by adding disabled:true, to the button(s) properties as you can see from the example below.

$(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>

If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

Upvotes: 2

Related Questions