如何设置Jquery UI dialog 中的button为disable变灰或者更改button样式

本文链接：https://blog.csdn.net/li_gf/article/details/7594628

本文介绍如何根据条件控制Jquery UI Dialog中的按钮状态，使其变灰或改变样式。通过设置按钮的`disabled`属性实现禁用，使用CSS类调整按钮样式。示例代码展示了如何在特定条件下禁用"Yes"按钮，并提供了两种不同的方法来更改按钮的外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面上的相应代码如下：

<div id="pop_dialog" title="保存数据" style="display: none;">
保存/放弃已添加的数据.
</div>

xx.js 代码如下，

function InitializeEditResultDialog() {
    $("#pop_dialog").dialog({
        autoOpen: false,
        resizable: false,
        height: 200,
        width: 400,
        modal: true,
        closeOnEscape: true,
        buttons: {

            "Yes": function () {
                $(this).dialog("close");
                ProcessData();
            },

            "No": function () {
                $(this).dialog("close");
                ProcessData();
            }

}
});
}

如果想根据条件控制dialog中的“Yes” 按钮变灰，可以：

$("#btnSave").click(function () {
$("#pop_dialog").dialog('open');

        if (validateInputBox() == false) {
            $('.ui-dialog-buttonpane').find('button:contains("Yes")').attr("disabled", "disabled");
        }
        else {
            $('.ui-dialog-buttonpane').find('button:contains("Yes")').removeAttr("disabled");
        }
    });

注意：一定要是classId = '.ui-dialog-buttonpane',这是Jquery自己给加上的，通过这个就能找到“Yes”按钮了，就可以控制其样式了。

或者

var button1 = $('.ui-dialog-buttonpane').children('button')[1];

$(button1).removeClass('ui-button-text-only').addClass('ui-button-text-icon');

或者

$("#id-dialog").dialog({

modal: true,

buttons: {

'Login': logIn,

Cancel: logOut

open: function() {

$buttonPane = $(this).next();