Question

我正在尝试将bootstrap select2 plugin整合到Jquery Form Wizard内。

我有一个jquery向导表单，有两个步骤。在第二步我有bootstrap select2下拉列表。每当我导航到第2步时，整个（select2插件的选择）字段都被禁用。

下面是我的HTML代码，

<form id="demoForm" method="post" action="json.html" class="bbq">
    <div id="fieldWrapper">
        <div class="step" id="first">
            .....
            .....
        </div>
        <div id="finland" class="step">
            ....
            .... 
            <select id="e1">
                <option value="AL">Alabama</option>
                ...
                <option value="WY">Wyoming</option>
            </select>                       
        </div>
    </div>
    <div id="demoNavigation">                           
        <input class="navigation_button" id="back" value="Back" type="reset" />
        <input class="navigation_button" id="next" value="Next" type="submit" />
    </div>
</form>
<hr />

<p id="data"></p>
</div>

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>        
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/jquery.form.wizard.js"></script>
<script type="text/javascript" src="../js/jquery.form.wizard.js"></script>

<script type="text/javascript">
$(function(){
    $("#demoForm").formwizard({ 
        formPluginEnabled: true,
        validationEnabled: true,
        focusFirstInput : true,
        formOptions :{
            success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
            beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
            dataType: 'json',
            resetForm: true
        }   
    }
    );

    $("#e1").select2();
});
</script>

Bootstrap select2在Jquery表单向导之外完全正常工作。

任何使其在Jquery表单向导插件中工作的解决方案？

Answer 1

找到解决方案，因为第二步被禁用，所有字段也被禁用。当第二步被激活时，除了选择字段，所有其他字段变为活动状态。需要extraak触发器来激活它。

使用下面的代码来实现它，

$("#next").click(function() { $("#e1").select2("enable", true); });

select2插件工作正常但不适用于jQuery Wizard插件

1 个答案: