Question

i have a small form. I want enable submit button when all the all the radio button is selected.

below is my code html

<form action="#" id="form1" method="post">
                <ul>
                    <li>
                        <h3>Here’s what I want:<strong class="result1"></strong></h3>
                        <div>
                        <span><input type="radio" value="Cash Back rewards" name="want" id="01"  /><label for="01">Cash Back rewards</label></span>
                        <span><input type="radio" value="Travel rewards" name="want" id="02" /><label for="02">Travel rewards</label></span>
                        <span><input type="radio" value="Gas rewards" name="want" id="03" /><label for="03">Gas rewards</label></span>
                        <span><input type="radio" value="Shopping rewards" name="want" id="04" /><label for="04">Shopping rewards</label></span>
                    </div>
                    </li>

                    <li>
                        <h3>Here’s my credit story: <strong class="result2"></strong></h3>
                        <div>
                        <span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span>
                            <span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span>
                        <span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span>
                        </div>
                    </li>

                    <li>
                        <h3>Here’s what I carry:</h3>
                        <span><input type="radio" value="I have a credit card with a good record" name="carry" id="08" /><label for="08">I have a credit card with a good record</label></span>
                        <span><input type="radio" value="I don’t have a credit card with a good record" name="carry" id="09" /><label for="09">I don’t have a credit card with a good record</label></span>

                    </li>
                </ul>
                <input type="submit" value="" name="" class="find" />
                </form>

i am weak in javascript please advise me.

one more thing if li is not fix it will generate dynamically, so what i will have to do. basically every li is one quetion and radio button is option. so the question will be generate dynamically it can be any no. its not fix

Answer 1

Something like this would do the trick:

$('#form1 :radio').click(function() {
    var disabled = $('#form1 li').filter(function() { return $(':radio:checked', this).length == 0; }).length > 0;
    $('#form1 .find').prop('disabled', disabled);
});

This assumes your submit button is disabled as the page loads, since the disabled state only changes when an option is checked. You could of course do the same check during DOMReady (in which case I’d extract the listener function), but I’d prefer setting the markup manually during load.

Demo

The disabled variable is set by selecting all li elements in the form, reducing it to only the ones that meet the filter criteria “containing no checked radiobuttons”, and checking whether there are any elements in the reduced collection.

If you’re using a jQuery version less than 1.6, use .attr instead of .prop to set the disabled state.