0

動的な行 (既に解決済み) と解決できない動的な有効化/無効化チェックボックスを使用してフォームを作成しています

このコードは次のように動作するはずです: 「which-cruise」を選択すると、1 つまたは 6 つのクラスを追加できますが、最初に「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>
4

1 に答える 1

0

私の解決策は jQuery >= v1.7 に依存していますが、新しい on() メソッドの代わりに非推奨の live() メソッドで同様のことができるはずです。

基本的に、イベント リスナーをテーブル自体に追加するので、テーブルに動的に追加される行数は問題になりません。クラス「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」を追加する必要があります。予約クラス (例: ファースト クラス、ローワー クラスなど)

onclick="" は使用されなくなるため、"your-extra-options" チェックボックスからも削除する必要があります。

フィドルの例はこちら

于 2013-02-12T21:00:00.507 に答える