如何在jquery中向动态表添加动态启用/禁用复选框？

Question

我正在构建一个带有动态行的表单（我已经解决了它）和我无法解决的动态启用-禁用复选框

这段代码应该像这样工作： 我选择“which-cruise”，然后我可以添加一个/六个类，但我应该首先单击“your-extra-options”以启用 6 个复选框。在第一行它工作得很好，但是当我添加（通过克隆）更多行时，每个“your-extra-options”复选框只能在第一行启用/禁用 6 个复选框时处理

HTML

<table class="reference" id="secondaryEmails" style="width: 800px;">
    <tr>
        <td>
            <select name="which-cruise">
                <option>First Cruise</option>
                <option>Second Cruise</option>
                <option>Third Cruise</option>
                <option>Fourth Cruise</option>
            </select>
        </td>
        <td>
            <input type="checkbox" name="your-extra-options" value="Your Extra Options" onclick="enableDisable(this,'extra_class','first_class','second_class','third_class','lower_class','rock-bottom_class')" />
        </td>
        <td>
            <input disabled="disabled" type="checkbox" name="extra_class" value="Extra Class" />
        </td>
        <td>
            <input disabled="disabled" type="checkbox" name="first_class" value="First Class" />
        </td>
        <td>
            <input disabled="disabled" type="checkbox" name="second_class" value="Second Class" />
        </td>
        <td>
            <input disabled="disabled" type="checkbox" name="third_class" value="Third Class" />
        </td>
        <td>
            <input disabled="disabled" type="checkbox" name="lower_class" value="Lower Class" />
        </td>
        <td>
            <input disabled="disabled" type="checkbox" name="rock-bottom_class" value="Rock-Bottom Class" />
        </td>
        <td>
            <input type="checkbox" name="breakfast" value="Breakfast" />
        </td>
        <td>
            <input type="checkbox" name="lunch" value="Lunch" />
        </td>
        <td>
            <input type="button" name="add" value="ADD" class="tr_clone_add2">
        </td>
    </tr>
</table>

脚本

<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
    $("input.tr_clone_add").live('click', function () {
        var $tr = $(this).closest('.tr_clone');
        var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);
    });

    var count = $("table.reference tr").length;

    $("input.tr_clone_add2").live('click', function () {
        count++;
        var $clone = $("#secondaryEmails tbody tr:first").clone();
        $clone.attr({
            id: "emlRow_" + count,
            name: "emlRow_" + count,
            style: "" // remove "display:none"
        });
        $clone.find("input,select").each(function () {
            $(this).attr({
                id: $(this).attr("id") + count,
                name: $(this).attr("name") + count
            });
        });
        $("#secondaryEmails tbody").append($clone);
    });

    function enableDisable(oChk) {
        var disable = !oChk.checked;
        var arglen = arguments.length;
        var obj, startIndex = 1;
        var frm = oChk.form;
        for (var i = startIndex; i < arglen; i++) {
            obj = frm.elements[arguments[i]];
            if (typeof obj == "object") {
                if (document.layers) {
                    if (disable) {
                        obj.onfocus = new Function("this.blur()");
                        if (obj.type == "text") obj.onchange = new Function("this.value=this.defaultValue");
                    } else {
                        obj.onfocus = new Function("return");
                        if (obj.type == "text") obj.onchange = new Function("return");
                    }
                } else obj.disabled = disable;
            }
        }
    }
</script>

Answer 1

我的解决方案依赖于 jQuery >= v1.7，但您应该能够使用已弃用的 live() 方法而不是较新的 on() 方法来做类似的事情。

基本上，我们将事件侦听器添加到表本身，因此动态添加到表中的行数无关紧要。每次检测到单击带有“your-extra-options”类的复选框时，我们都会在该特定行中查找相关的类复选框并根据需要启用/禁用它们。比如：

$(document).ready(function() {
    var table = $('#secondaryEmails');
    table.on('click', '.your-extra-options', function() {
        var checkbox = $(this);
        // Find all relevant checkboxes in the same row as the clicked "your-extra-options" checkbox
        var class_checkboxes = checkbox.closest('tr').find('.class-checkbox');
        var disable_classes = checkbox.prop('checked') ? false : true;
        class_checkboxes.prop('disabled', disable_classes);
    });
});

就您的 HTML 而言，这需要您将“your-extra-options”类添加到名为“your-extra-options”的第一行输入中，并将“class-checkbox”类添加到每个与预订舱位相关的复选框（例如头等舱、低等舱等）

您还应该从“your-extra-options”复选框中删除 onclick=""，因为它将不再使用。

例如小提琴here