Question

当我将卡添加到收件箱中时。然后可以双击卡片，然后弹出对话框。

当我想在对话框中创建动态CheckBox时，我在将它们插入正确位置时遇到问题。我想将它们放在输入字段下方，而不是在图像下方。我现在不知道如何以我描述的方式放置它们。我将不胜感激。

Jquery的：

$(function () {
    // Click function to add a card
    var $div = $('<div />').addClass('sortable-div');
    $('<label>Title</label><br/>').appendTo($div);
    $('<input/>', {
        "type": "text",
            "class": "ctb"
    }).appendTo($div);
    $('<input/>', {
        "type": "text",
            "class": "date"
    }).appendTo($div);
    var cnt = 0,
        $currentTarget;
    $('#AddCardBtn').click(function () {
        var $newDiv = $div.clone(true);
        cnt++;
        $newDiv.prop("id", "div" + cnt);

        $newDiv.data('checkboxes', []);

        $('#userAddedCard').append($newDiv);
        //      alert($('#userAddedCard').find("div.sortable-div").length);        
    });

    // Double click to open Modal Dialog Window
    $('#userAddedCard').dblclick(function (e) {
        $currentTarget = $(e.target);

        $('#modalDialog #customTextBox').val($currentTarget.children('.ctb').val());
        $('#modalDialog #datepicker').val($currentTarget.children('.date').val());

        $('.allcheckbox').remove(); // Remove checkboxes
        $('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */

        /* Add checkboxes from card data */
        $.each($currentTarget.data('checkboxes'), function (i, checkbox) {
            addCheckbox(checkbox.name, checkbox.status);
        });

        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center'
        });
        return false;

    });
    $("#datepicker").datepicker({
        showWeek: true,
        firstDay: 1
    });

    $("#Getbtn").on("click", function () {
        var val = $("#customTextBox").val();
        $currentTarget.find(".ctb").val(val);
        $currentTarget.find(".date").val($("#datepicker").val());

        $currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); /* Copy checkbox data to card */

        $('#modalDialog').dialog("close");
    });

    // Add a new checkBox
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    function addCheckbox(name, status) {
        status = status || false;

        var container = $('#modalDialog');
        var inputs = container.find('input');
        var id = inputs.length + 1;
        var data = {
            status: status,
            name: name
        };

        var div = $('<div />', { class: 'allcheckbox' });
        $('<input />', {
            type: 'checkbox',
            id: 'cb' + id,
            value: name
        }).prop('checked', status).on('change', function () {
            data.status = $(this).prop('checked');
        }).appendTo(div); /* set checkbox status and monitor changes */

        $('<label />', {
            'for': 'cb' + id,
            text: name
        }).appendTo(div);

        div.appendTo(container);

        container.data('checkboxes').push(data);
    }

});

Answer 1

试试这个http://jsfiddle.net/62QY8/72/

HTML

        <div id="boxs"></div>

JS

  var container = $('#boxs');
  ...
  $('#boxs').data('checkboxes')); /* Copy checkbox data  */
  ...    
  $('#boxs').data('checkboxes', []); /* Reset dialog checkbox data */

在正确的位置插入CheckBoxes的问题

1 个答案: