Question

以下部分仅在用户选择＆＃34;是＆＃34;选项。此部分（id =＆＃34; co-op＆＃34;）嵌入在长表格中。该部分中的所有输入都是必需的（使用HTML5＆＃34;必需＆＃34;属性）。但是，如果用户选择＆＃34;否＆＃34;以下部分不会在表单中显示。这意味着我想禁用＆＃34;必需＆＃34;当用户选择＆＃34; No＆＃34;;因为他们无法查看输入。目前，他们仍在提交并阻止成功提交。谢谢！

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

Answer 1

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

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

禁用html5＆＃34;必需＆＃34;不显示表单部分时的字段输入属性

1 个答案: