select2 plugin works fine but not with jQuery Wizard Plugin

Question

I'm trying to integrate bootstrap select2 plugin inside Jquery Form Wizard.

I have a jquery wizard form, having 2 steps. On second step i have bootstrap select2 dropdown. Whenever i navigate to step 2 the whole (select2 plugin's select) field is disabled.

below is my html code,

<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 is working completely fine outside to Jquery form wizard.

Any solution to make it work within Jquery form wizard plugin ?

Answer 1

Found the solution, As because the second step is disabled, all fields got disabled too. When second step got activated, except select field all other fields becoming active. Need additionak trigger to activate it back.

use below code to achieve it,

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