Question

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

此代码应该像这样工作：我选择“哪个巡航”然后我可以添加一个/六个类，但我应该首先点击“你的额外选项”以启用6个复选框。在第一行它工作得很好但是当我添加（通过克隆）更多行时，每个“你的额外选项”复选框只处理启用/禁用第一行的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＆gt; = 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

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

1 个答案: