Question

我有一个页面，其中有两组复选框。当选中Set 2底部的复选框时，它会检查其上方的集合1中的相应复选框。这就是事情，我有一个＆＃34;添加＆＃34;第一组复选框下的按钮，复制复选框的第2组。但是，这只是为了向特定部门添加另一个订单项。

因此，用户可以为附加到其上的多个部门发出具有多个任务的工作订单。

请参阅编辑以获得详细说明。

现在的问题是第一个阵容项目检查工作，但我添加的任何其他阵容项目在检查时都不起作用。

$('.cad, .design, .shop, .cnc').on('change', function() {
    // Split into space-delimited array in case we want
    // to check off more than one
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).attr('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).attr('checked', !!checked);
    });
});

您可以在这个jsfiddle中查看我的jquery代码，看看我尝试了什么：http://jsfiddle.net/Bg5Uk/

编辑：试着再次解释这是如何运作的。

一个工具（我们称之为工具X）已准备好开始制造，因此经理必须向其员工提交工作单。

经理将为工具X创建工作订单，并会在我的小提琴中显示类似于表格的内容。
现在，经理想要多个＆＃34;任务＆＃34; （阵容）已完成工具X和每个＆＃34;任务＆＃34;将被分配到一个单独的部门。
经理开始填写任务1（阵容＃1），一旦完成，他就会在阵容中检查C - CAD。这将检查上述设置中的CAD。因此，工作订单现在将通知工作订单的CAD部门，以便他们可以开始工作。
经理尚未完成，现在他想再填2个任务。他必须点击＆＃34; ADD＆＃34;在表单底部的按钮添加另一个任务表单（排队＃2）。他把它填满并检查M - CNC和S - SHOP，它将检查上面第一组复选框中的CNC和SHOP。
现在工作订单不仅分配了CAD，而且还有CNC和SHOP，也会通知，但是，他们的工作与任务2（阵容＃2）有关。
最后，经理创建最后一个任务（阵容＃3）。任务3，他检查D - DESIGN和S - SHOP。这将只检查复选框的第1组中的设计，不要忘记，商店已经被检查，因此他们已经收到工作订单的通知。他们知道任务3也是他们完成的，因为我已经让那部分工作了。

现在，当经理提交工作订单时，CAD，CNC，SHOP和DESIGN都将收到电子邮件通知，以便他们可以阅读工单并开始工作。

问题：核对仅适用于第一个任务（1）（阵容＃1）。任何其他添加的任务都不会检查相应的部门。这是一个问题，因为任务2和3可能在任务上检查了设计和商店，但部门不会收到电子邮件，因为他们没有在第一组复选框上检查。

您可能会问自己，为什么管理员不会仔细检查表单并检查通知和工作单应发送到的部门。我甚至不知道答案，我只是认为这归结为懒惰，并急于填写这些东西。

编辑2：

如果我使用下面的内容来检查返回的值。对于第一个阵容复选框，它会返回应该检查的复选框。但是，对于阵容＃2，当我添加新阵容时，不会返回任何内容。我不明白......

$("input[name^='lineitem']").on('change', function() {
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).prop('checked');
    alert(elemsToCheck); //returns cad, design, shop, cnc, etc.
    $.each(elemsToCheck, function() {
        $('#' + this).prop('checked', !!checked);
    });
});

Answer 1

如果代码适用于第一行，根据你这样做（＆＃34;检查仅适用于第一个任务（1）（阵容＃1）。＆＃34;），这可能最有可能解决您面临的问题：

只需用以下代码替换代码的给定部分：

$(document).on('change','.cad, .design, .shop, .cnc', function() {
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).prop('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).prop('checked', !!checked);
    });

请注意，我还使用attr

更改了prop

<强>更新

在这里查看您的代码：

 $template = '<tr>\
            <td><input type="hidden" id="number" value="${num}" /><input style="width:20px" class="number" name="lineitem[${num}][num]" value="${num}" /></td>\
            <td>\
            <ul>\
            <li><input class="cad" type="checkbox" name="lineitem[${num}][affects][cad]" /><label><strong>C</strong> - CAD</label></li>\
            <li><input class="design" type="checkbox" name="lineitem[${num}][affects][design]" /><label><strong>D</strong> - DESIGN</label></li>\
            <li><input class="shop" type="checkbox" name="lineitem[${num}][affects][shop]" /><label><strong>S</strong> - SHOP</label></li>\
            <li><input class="cnc" type="checkbox" name="lineitem[${num}][affects][cnc]" /><label><strong>M</strong> - CNC</label></li>\
            </ul>\
            </td>\
            <td>\
            <ul>\
            <li><input type="checkbox" name="lineitem[${num}][engineering_changes]" /><label>Engineering</label></li>\
            <li><input type="checkbox" name="lineitem[${num}][correction_changes]" /><label>Correction</label></li>\
            </ul>\
            </td>\
            <td><textarea style="width:100%; height:100%" name="lineitem[${num}][desc]"></textarea></td>\
            <td><a class="remove" href="javascript:void(0)">Remove</a></td>\
            </tr>';

data-check未在您的模板中为您的任何元素定义，请尝试在此处为新添加的项目定义它，并且您很高兴。

单击其他复选框时，选中并取消选中复选框

1 个答案: