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个已停用的表单字段，因为它们并非“成功”。基本上，当你的表格由设计提交时，他们不会继续骑行。

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

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

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

Answer 2

<强>更新：

试试这个（如果你点击#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();
    }
});

Answer 3

当然，您发布的此代码包含在您刚刚未包含在示例中的$(document).ready(function() { });或$.ready(function () { });内？

从右吗

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

3 个答案: