2

HTML 構造:

<tr>
<td class="edit"><input type="checkbox" class="editbox" /></td>
<td class="content"><input type="text" class="contentbox" size="40" disabled="disabled"/></td>
<td class="delete"><input type="checkbox" class="deletebox" /></td>
</tr>

私は何をしたいですか？ユーザーがinput.editboxをクリックすると：

  • input.contentbox が編集可能になりました
  • input.deletebox がオフになりました (以前にチェックされていた場合)

ユーザーがinput.deleteboxをクリックすると：

  • input.contentbox が無効になりました
  • input.editbox がオフになりました (以前にチェックされていた場合)

私はその構造のためにこれをしました:

<input type="checkbox" class="editbox"/>
<input type="text" class="contentbox" size="40" disabled="disabled"/>
<input type="checkbox" class="deletebox"/>

.next() および .prev() を使用して

$(document).ready(function () {
    $("#form input.editbox[type=checkbox]").each(function () {
        $(this).change(function () {
            if ($(this).is(":checked")) {
                $(this).next().removeAttr("disabled");
                $(this).next().next().attr('checked', false);
            } else {
                $(this).next().attr("disabled", "disabled");
            }
        });
    });
    $("#form input.deletebox[type=checkbox]").each(function () {
        $(this).change(function () {
            if ($(this).is(":checked")) {
                $(this).prev().attr("disabled", "disabled");
                $(this).prev().prev().attr('checked', false);
            }
        });
    });
});

ただし、jQuery コードを新しい構造に変換することはできません。どんな助けやアイデアも大歓迎です。

4

2 に答える 2

5

で試してくださいparent().find(selector)：

$(document).ready(function () {
    $("#form input.editbox[type=checkbox]").each(function () {
        $(this).change(function () {
            if ($(this).is(":checked")) {
                $(this).parent().parent().find('.contentbox').removeAttr("disabled");
                $(this).parent().parent().find('.deletebox').attr('checked', false);
            } else {
                $(this).parent().parent().find('.contentbox').attr("disabled", "disabled");
            }
        });
    });
    $("#form input.deletebox[type=checkbox]").each(function () {
        $(this).change(function () {
            if ($(this).is(":checked")) {
                $(this).parent().parent().find('.contentbox').attr("disabled", "disabled");
                $(this).parent().parent().find('.editbox').attr('checked', false);
            }
        });
    });
});

私の意見では、次よりも優れたソリューションです。これは、html 構造の変更に対してより独立しています。td のチェックボックスを再配置することができ、コードは引き続きプロパティで動作します。

于 2013-05-24T10:36:59.817 に答える