Take the 2-minute tour ×

I have a table with 4 columns, and a submit button. Like this:

pizza   cb     cb    tb
fries   cb     cb    tb
curry   cb     cb    tb
noodle  cb     cb    tb


What I need is for the button to be disabled if any No box is checked but its corresponding textbox is empty. I have this working to an extent. If you go through each one in sequence, it's fine. So you say Yes to pizza and the button remains enabled. You change it to No and the button is disabled. You provide a reason and the button is enabled again. You clear the textbox and the button is disabled again. You change back to Yes and the button is enabled. You then do the same for fries and its all fine. Etc.

However, if you choose No for all of them and provide reasons for all of them (button is therefore enabled), but then empty the textbox for pizza, the button doesn't get disabled like it should. But if you clear the noodle one then it does.

What I've been trying to do is cycle through the table every time a checkbox is clicked or on keyup in the Reason column, but I'm quite new to jQuery and don't really know how to do that... Can anyone help?





function checkReasons(){
        var cb = $(this).find('td:nth-child(3) input[type=checkbox]');
        var tb = $(this).find('td:nth-child(4) input[type=text]').val();
        if (cb.is(':checked')){
            if (tb.length == 0){
            } else {
share|improve this question
Can you share the html so we (or you) can make a fiddle with a demo –  Sergio Oct 16 '13 at 12:30
Sure, thanks. jsfiddle.net/CPSeM It's a bit more bloated than what I have in the post above, because I was trying to keep it simple. –  Fox Oct 16 '13 at 14:16
add comment

1 Answer

up vote 1 down vote accepted

Don't use .attr(), use .prop(). http://api.jquery.com/prop/

And probably better to handle the change event, rather than the click or keyup events, which probably happen before the value has actually changed.

Example of how to do this here: http://jsfiddle.net/EQkLB/

share|improve this answer
Nice, thanks. Is there no way to use keyup then? With this solution I need to leave the textbox in order to affect the button. –  Fox Oct 16 '13 at 14:29
Yeah, you could probably add keyup, just change it from "change" to "change keyup" to check both events. –  samjudson Oct 16 '13 at 14:39
Awesome, that now works perfectly. Stupid question, but where in my code would I put that..? My full code is here: jsfiddle.net/CPSeM/1 - The two functions there already are just to create the extra column, move the textboxes into it, and control their visibility. But I don't know where in there to put your solution... Thanks. –  Fox Oct 16 '13 at 15:00
@Fox, please click to accept this answer if it fixed your problem. –  Sergio Oct 16 '13 at 16:15
Put it anywhere. It uses event delegation, so will be triggered by any checkbox or input box in the document. jsfiddle.net/CPSeM/3 –  samjudson Oct 17 '13 at 13:45
add comment

Your Answer


