disable button if checkbox checked but corresponding textbox empty

Question

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

FOOD    YES    NO    REASON
pizza   cb     cb    tb
fries   cb     cb    tb
curry   cb     cb    tb
noodle  cb     cb    tb

[SUBMIT]

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?

Thanks.

Code:

$('input[type=checkbox]').click(function(){
        checkReasons();
}

$('input[type=text]').keyup(function(){
        checkReasons();
});

function checkReasons(){
    $('#mytable tr:not(:first)').each(function(){
        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){
                $('#button').attr('disabled','disabled');                
            } else {
                $('#button').removeAttr('disabled','disabled');
            }
        } 
    });
}

Can you share the html so we (or you) can make a fiddle with a demo — Sergio
– Sergio, Commented Oct 16, 2013 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
– Fox, Commented Oct 16, 2013 at 14:16

samjudson · Accepted Answer · 2013-10-16 13:00:21Z

1

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/

edited Oct 16, 2013 at 13:00

answered Oct 16, 2013 at 12:34

samjudson

57k7 gold badges61 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fox Over a year ago

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.

samjudson Over a year ago

Yeah, you could probably add keyup, just change it from "change" to "change keyup" to check both events.

Fox Over a year ago

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.

Sergio Over a year ago

@Fox, please click to accept this answer if it fixed your problem.

samjudson Over a year ago

Put it anywhere. It uses event delegation, so will be triggered by any checkbox or input box in the document. jsfiddle.net/CPSeM/3

Collectives™ on Stack Overflow

disable button if checkbox checked but corresponding textbox empty

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related