jQuery - selecting input inside td (in same row)

Question

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:

input.contentbox became editable
input.deletebox became unchecked (if was checked before)

When user click on input.deletebox:

input.contentbox became disabled
input.editbox became unchecked (if was checked before)

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.

Kasyx · Accepted Answer · 2013-05-24 10:36:59Z

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.

Adil Shaikh · Accepted Answer · 2013-05-24 10:39:27Z

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

Collectives™ on Stack Overflow

jQuery - selecting input inside td (in same row)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related