form wont submit with jquery form submit when some fields are disabled

Question

I am submitting a form via jquery form submit. just like this example However, I have given the user an option to disable some fields on the form. I am using following jquery code to do this:

   $('#onlyTwo').click(function(){
        var stuff = $("#textarea3,  #textarea4, #radio3, #radio4, #onlyThree");
        if($(this).is(":checked"))
            stuff.attr("disabled", true);
        else {
            stuff.removeAttr("disabled");
        }
    });

basically, onlyTwo is a checkbox. on toggle some fields are made disabled.

The form does not seem to submit when some fields are made disabled. There are 8 fields on the form and seems like each time i click submit it expects those 8 fields no matter what.

has someone encountered this before?

Complete Code: code for ajax Form Submit

    var options = {
        target:        '#output1',   // target element(s) to be updated with server response
        beforeSubmit:  showRequest,  // pre-submit callback
        success:       showResponse  // post-submit callback
    };


    // bind form using 'ajaxForm'
        $('#addQuestionForm').ajaxForm(options);
function showRequest(formData, jqForm, options) {
    var queryString = $.param(formData);
    alert('data: ' + formData);
    return true;
}

// post-submit callback
function showResponse(responseText, statusText)  {
    $('#output1').slideDown(100);
    $('#output1').fadeOut(3500);
    $('#question').val('');
    $('#textarea1').val('');
    $('#textarea2').val('');
    $('#textarea3').val('');
    $('#textarea4').val('');
    $('#question').val('');
    $('input[name="correctAnswer"]').attr('checked', false);
}

code to disable fields:

    $('#onlyTwo').click(function(){
        var stuff = $("#textarea3,  #textarea4, #radio3, #radio4, #onlyThree");
        if($(this).is(":checked"))
            stuff.attr("disabled", true);
        else {
            stuff.removeAttr("disabled");
        }
    });

    $('#onlyThree').click(function(){
        var stuff = $("#textarea4, #radio4, #onlyTwo");
        if($(this).is(":checked"))
            stuff.attr("disabled", true);
        else {
            stuff.removeAttr("disabled");
        }
    });

code for my form:

            <s:form id="addQuestionForm" action="addQuestion" namespace="/securityExam" method="post">
                <table border="0">
                        <td>Question For</td>
                        <td>
                            <select name="questionsType" id="questionsType">
                                <option selected="selected" value="U">Users</option>
                                <option value="C">Co-ordinators</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Question</td>
                        <td><textarea id="question" name="question" rows="3" cols="35"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>Option 1</td>
                        <td><textarea  id="textarea1" name="option1" rows="3" cols="35"></textarea></td>
                    </tr>
                    <tr>
                        <td>Option 2</td>
                        <td><textarea  id="textarea2" name="option2" rows="3" cols="35"></textarea></td>
                    </tr>
                    <tr>
                        <td>Option 3</td>
                        <td><textarea id="textarea3" name="option3" rows="3" cols="35"></textarea></td>
                        <td><input id="onlyTwo" type="checkbox">Only two options</input></td>
                    </tr>
                    <tr>
                        <td>Option 4</td>
                        <td><textarea id="textarea4" name="option4" rows="3" cols="35"></textarea></td>
                        <td><input id="onlyThree" type="checkbox">Only three options</input></td>
                    </tr>
                    <tr>
                        <td>Correct Option</td>
                        <td>
                            <input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
                            <input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
                            <input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
                            <input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <br><br>
                 <s:submit name="Submit"/>
            </s:form>

Answer 1

UPDATED:

Try this (if you are clicking #onlyTwo or #onlyThree twice I think they both must be "unchecked")

function ClearAllStuff() {
    $("#textarea3,  #textarea4, #radio3, #radio4, #onlyThree, #onlyTwo").removeAttr("disabled");
    $("#onlyThree, #onlyTwo").removeAttr("checked");
}

$('#onlyTwo').click(function(){
    var stuff = $("#textarea3,  #textarea4, #radio3, #radio4, #onlyThree");
    if($(this).is(":checked"))
        stuff.attr("disabled", true);
    else {
        ClearAllStuff();
    }
});

$('#onlyThree').click(function(){
    var stuff = $("#textarea4, #radio4, #onlyTwo");
    if($(this).is(":checked"))
        stuff.attr("disabled", true);
    else {
        ClearAllStuff();
    }
});

Answer 2

According to the W3C disabled form fields cannot be submitted because they are not "successful." Basically, they don't go along for the ride when your form's submitted by design.

You can try to bind a function to your form's submit Event to re-enable all of those disabled boxes and make them "successful" and submitted (and set them to a sensible default value so you know that your user disabled them and not just left them blank, etc.).

[EDIT: This was based on the original post before the OP made a couple edits, so YMMV.]

$('#yourForm').bind('submit',function(){
    $(this).find(':disabled').removeAttr('disabled').val('disabledByUser');
    return true;
}

Answer 3

Of course, this code you're posting is wrapped inside a $(document).ready(function() { }); or $.ready(function () { }); that you just didn't include in the example right?

Right?