CODEWITHSUNDEEP
jqueryjquery-selectors
ravenger
ravenger

Reputation: 23

jQuery - selecting input inside td (in same row)

HTML structure:

<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>

What I want? When user clicks on input.editbox:

When user click on input.deletebox:

I did this for that structure:

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

by using .next() and .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);
            }
        });
    });
});

But now can't convert jQuery code for new structure. Any help and ideas are greatly appreciated.

Upvotes: 2

Views: 6790

Answers (2)

Adil Shaikh
Adil Shaikh

Reputation: 44740

You can use $(this).closest('tr') with .find() instead of using .next() or .prev()

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

Upvotes: 1

Kasyx
Kasyx

Reputation: 3200

Try with 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);
            }
        });
    });
});

In my opinion its better solution than next. This one is much more independent on changes in your html structure. You can rearrange checkboxes in td's and code will still works property.

Upvotes: 5

Related Questions