Checkbox changes the parent tr, and the inputs contained within...

Question

Hi guys,

Not sure of the best way to explain this... I have an input where you can enter two times, but also a checkbox if you wish to omit a certain day, thus rendering the inputs kinda useless, so I'd like to disable them...

Here's what I have at the moment for the HTML (repeated 7 times):

<td><div>From:</div><input type="text" name="F_MON"></td>
<td><div>To:</div><input type="text" name="T_MON"></td>
<td class="unavailableday"><input type="checkbox" name="MON_UNAVAIL" value="Y"> Unavailable?</td>

And then the Javascript:

$("tr td input[type=checkbox]").bind("click", function() {
    var $this = $(this);
    if($this.is(':checked')) {
     $this.parents('tr').css({'background-color' : 'lightyellow'});
     $this.parents('tr input').siblings('input type=[text]').attr("disabled", true);
    }
});

Unfortunately when you check the box, the appropriate tr goes yellow which is perfect, but the previous inputs don't disable... I'd also like to do an .unmask() and change the .val() when they're disabled, kinda hoping if I can get the parents/siblings right it'd be easy to adapt :o

Thanks!

Answer 1

Try

$("tr td :checkbox").bind("click", function() {
    var $this = $(this);
    if($this.is(':checked')) {
        var $row = $this.closest('tr');
        $row.css('background-color', 'lightyellow');
        $this.siblings(':text').attr("disabled", "disabled");
    }
});