不显示表单部分时禁用html5“必填”字段输入属性答案

【问题标题】：Disable html5 "Required" field input attribute when section of form is not displayed不显示表单部分时禁用html5“必填”字段输入属性
【发布时间】：2014-10-23 22:00:05
【问题描述】：

只有当用户选择“是”选项时，才会出现下面的部分。此部分 (id="co-op") 嵌入在长表单中。该部分中的所有输入都是必需的（使用 HTML5“必需”属性）。但是，如果用户选择“否”，则下面的部分不会显示在表单中。这意味着当用户选择“否”时，我想禁用该部分中的“必填”字段；因为他们无法查看输入。目前他们仍在提交并阻止成功提交。谢谢！

    <section id="co-app">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="fullName">Co-Applican'ts Information</label>
                            <input type="text" class="form-control" name="firstName" placeholder="First Name" required>     
                        </div><!--/form-gp-->
                    </div><!--/col-md-4-->  
                    <div class="col-md-1">
                        <div class="form-group">
                            <input type="text" class="form-control" name="middleName" placeholder="M.I." maxlength="1" id="middle-name" required>   
                        </div><!--/form-gp-->
                    </div><!--/col-md-1-->  
                    <div class="col-md-3">
                        <div class="form-group">
                            <input type="text" class="form-control" id="last-name" placeholder="Last Name" required>        
                        </div><!--/form-gp-->
                    </div><!--/col-md-1-->  
                </div><!--/row-->   
            </div><!--/container-->
        </section><!--/co-app-->

【问题讨论】：

您可能应该将它们设为disabled，这将阻止它们被提交并且也不会被认为是实际需要的，无论required 属性的状态如何。
那么，你在哪里卡住了？
@DavidThomas - 我正在寻找一个 jQuery 解决方案，该解决方案将阻止在该部分不可见时提交字段。
我很欣赏你想要的，但要获得任何有用的答案，你需要证明你尝试解决自己的问题，向我们展示你在哪里卡住了，出了什么问题。

标签： javascript jquery html jquery-plugins

【解决方案1】：

使用 jquery 验证引擎插件，我能够使用以下 jquery 在选中时切换隐藏元素，并在未选中时删除“必需”属性。

$(document).ready(function() {
    $("#retired-select-coapp, #retired-select-primary ").change(handleNewSelection);
    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#retired-select-coapp, #retired-select-primary"));

    /** Step One Co-App Info  **/
    $('#co-app').hide();
    $(".app-choice").change(function () { //use change event

    if (this.value == "option2") {
    $('#co-app').stop(true,true).slideDown('1000'); //than show
    $('#co-app input,#co-app select').addClass('validate[required]');

    } else {
    $('#co-app').stop(true,true).slideUp('1000'); //else hide
    $('#co-app input, #co-app select').removeClass('validate[required]');
}
});

【讨论】：