0

我在主页上有一些复选框；当它们中的每一个被单击时，我会创建一个临时的 jquery ui 对话框，上面有一些复选框（那些不起作用的）；我发现第一次加载对话框复选框，可以通过 jquery 选中和取消选中它们。如果我关闭并重新创建该对话框，我将无法通过 jquery 选中或取消选中复选框；我尝试了以下方法但没有结果（元素状态更改但页面上复选框的元素未刷新）

$('#checkbox').attr('checked', true);
$('#checkbox').prop('checked', true);

元素状态更改，我检查了它

$('#checkbox').attr('checked');
$('#checkbox').prop('checked');
$('#checkbox').is(':checked');

代码如下：

// For each checkbox in a form in main page
$('.first_form_cbox').each(function() 
{
    // When each checkbox is clicked (checked) fun_handler is called,
    // and id of checkbox is passed to it
    var id = $(this).attr('id');
    $(this).click({'id': id }, fun_handler); 
});

// Handler for click on main page checkbox
function fun_handler()
{
    // Dialog body is created    
    var dlg_body = '<div class="sfun_container">';
    // Array that holds values used by checkboxes
    var fun_list = new Array( 
        {'name' : 'Minimum, Maximum', 'fun' : 'MMX'},
        {'name' : 'Average', 'fun' : 'AVG'},
        {'name' : 'Standard Deviation', 'fun' : 'STD'},
        {'name' : 'Standard Error of the Mean', 'fun' : 'SEM'},
        {'name' : 'Distinct Count', 'fun' : 'DCNT'}
        );
    // Creates all checkboxes using values defined in fun_list
    for (var f_index in fun_list)
    {
        dlg_body += '<input id="tfun_cbox_' + fun_list[f_index]['fun'] 
            + '" type="checkbox" class="tfun_cbox" value="'
            + fun_list[f_index]['fun'] + '"/>' 
            + fun_list[f_index]['name'] + '<br/>';
    }
    dlg_body += '</div>';
    // Creates temporary dialog
    $('<div title="Select function(s)"><p>' + dlg_body + '</p></div>').dialog(
    {
        modal : true,
        width : 320,
        resizable : false,
        // When open
        open : function ()
        {
            // Gets from data-funs attribute of main page checkbox
            // Each main page checkbox may have some functions already
            // inserted in data-funs, if earlier some dialog checkboxes,
            // that represent functions, were checked and their values
            // saved in data-funs
            var funs = $('#' + event.data['id']).data('funs');
            if (funs != undefined)
            {
                // Retrieves from funs which dialog checkboxes were checked
                for(var f_index in funs)
                {
                    // Checks dialog checkbox
                    $('#tfun_cbox_' + funs[f_index]).prop('checked', true);
                }
            }
        },
        close : function ()
        {
            if ($('.tfun_cbox:checkbox:checked').length > 0)
            {
                // Some dialog checkboxes are checked
                var funs = new Array();
                $('.tfun_cbox:checkbox:checked').each(function()
                {
                    // Saves dialog checked checkbox state value in funs
                    funs.push($(this).val());
                    // Unchecks dialog checkbox
                    $(this).prop('checked', false);
                });
                // Saves all checkboxes value in data-funs of main page
                // checkbox
                $('#' + event.data['id']).data('funs', funs);
            }
        },
        buttons : [
        {
            text : "Ok",
            click : function()
            {
                // Checks back main page checkbox that 
                // when clicked fired fun_handler
                $('#' + event.data['id']).prop('checked', true);
                $(this).dialog("close");
            }
        },
        {
            text : "Cancel",
            click : function()
            {
                // Unchecks all dialog checkboxes in order not to save them
                $('.tfun_cbox:checkbox:checked').prop('checked', false);
                $(this).dialog("close");
            }
        }]
    });    
}

如果需要，我会发布更多代码。谢谢

4

2 回答 2

1

尽量不要使用 id 选择器，而是使用类 1。我的意思是不要选择 $('#checkbox')，而是选择 $('.mycheckbox')。如果不是，您将创建两个具有相同 id 的对象，并且在第二个调用中，JQuery 可能指的是旧对象。

于 2012-12-09T18:38:51.030 回答
1

我可能错了，因为我不完全了解 jqueryui 对话框的工作原理，但是如果您尝试在某些 DOM 元素上附加事件，这些元素会被破坏然后重新创建，它们显然会丢失所有绑定在它们上的事件。如果我需要处理未来 DOM 元素的事件，我可能会使用.delegate()or指令。.on()

于 2012-12-09T19:04:54.920 回答