javascript - 确定单击后 JQuery 对话框操作无法正常工作

Question

我制作了一个 JQuery 对话框，但由于某种原因，单击“确定”按钮时执行的代码无法正常运行。

我希望在用户单击编辑按钮后有一个“确认对话框”，这将从根本上警告用户他们将编辑可能不应该编辑的内容。

此外，如果用户单击“确定”按钮，我希望编辑输入可编辑，同时隐藏编辑按钮。

尽管如此，其他一切都按其应有的方式进行。例如，当用户单击“关闭”或“取消”按钮时，对话框将正确关闭，而当用户单击“确定”按钮时，警报将起作用，并且对话框将正确关闭。因此，唯一无法正常工作的是警报和对话框关闭之间的代码。

function ShowDialogBox(title, content) {
        $("#lblMessage").html(content);
        $("#dialog").dialog({
            resizable: false,
            title: title,
            modal: true,
            width: '400px',
            height: 'auto',
            bgiframe: false,
            hide: { effect: 'fade', duration: 400 },
            buttons: [
                {
                    text: 'OK',
                    "class": 'showcss',
                    click: function () {
                        alert('hello');
                        $("#edit_input").attr("readonly", false);
                        $("#edit_input").focus();
                        $('#edit_button').hide();               
                        $("#dialog").dialog('close');
                    }
                },
                {
                    text: 'Cancel',
                    "class": 'showcss',
                    click: function () {
                        $("#dialog").dialog('close');
                    }
                }
            ]
        });
    }

Answer 1

问题在于属性名称 readOnly 区分大小写。使用 prop 而不是 attr 的代码:

function ShowDialogBox(title, content) {
    $("#lblMessage").html(content);
    $("#dialog").dialog({
        resizable: false,
        title: title,
        modal: true,
        width: '400px',
        height: 'auto',
        bgiframe: false,
        hide: {
            effect: 'fade',
            duration: 400
        },
        buttons: [{
            text: 'OK',
                "class": 'showcss',
            click: function () {
                alert('hello');
                $("#edit_input").prop("readOnly", false);
                $("#edit_input").focus();
                $('#edit_button').hide();
                $("#dialog").dialog('close');
            }
        }, {
            text: 'Cancel',
                "class": 'showcss',
            click: function () {
                $("#dialog").dialog('close');
            }
        }]
    });
}