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

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:

我通过jquery表单提交表单。就像这个例子但是,我已经给用户一个选项来禁用表单上的一些字段。我使用以下jquery代码来执行此操作:

   $('#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.

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

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.

当某些字段被禁用时,表单似乎不会提交。表单上有8个字段,似乎每次我点击提交时,无论如何都会预期这8个字段。

has someone encountered this before?

以前有人遇到过这个吗?

Complete Code: code for ajax Form Submit

完整代码: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);
}

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>

3 个解决方案

#1

UPDATED:

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

试试这个(如果你点击#onlyTwo或#onlyThree两次,我认为它们都必须“未选中”)

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

#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.

根据W3C禁用表单字段无法提交因为它们不“成功”。基本上,当你的表格由设计提交时,他们不会继续骑行。

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.]

[编辑:这是基于OP之前的原始帖子做了一些编辑,所以YMMV。]

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

#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?

当然,您发布的此代码包含在$(document).ready(function(){})中;或$ .ready(function(){});你刚刚没有在示例中包含哪个权利?

Right?