jquery - 当某些字段被禁用时，表单不会使用 jquery 表单提交来提交

Question

我正在通过 jquery 表单提交提交表单。就像这样example但是，我为用户提供了禁用表单上某些字段的选项。我使用以下 jquery 代码来执行此操作:

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

基本上，onlyTwo 是一个复选框。切换时某些字段被禁用。

当某些字段被禁用时，表单似乎无法提交。表单上有 8 个字段，似乎每次我单击“提交”时，无论如何都需要这 8 个字段。

以前有人遇到过这种情况吗？

完整代码:ajax表单提交代码

    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);
}

禁用字段的代码:

    $('#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");
        }
    });

我的表单代码:

            <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

According to the W3C无法提交禁用的表单字段，因为它们不“成功”。基本上，当您按设计提交表单时，它们不会随波逐流。

您可以尝试将函数绑定(bind)到表单的提交事件，以重新启用所有这些禁用的框并使它们“成功”并提交(并将它们设置为合理的默认值，以便您知道您的用户禁用了它们并且不只是将它们留空等)。

[编辑:这是基于 OP 进行一些编辑之前的原始帖子，所以 YMMV。]

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