[Solved] Bootstrap Step Wizard step reset on CheckBox Check in jQuery

Last Reply 9 months ago By dharmendr

Posted 9 months ago

Hi

I have problem.

There's a "chcYes" checkbox when I came to step 3. Clicking on it closes the modal. What is the reason of this ?

Please can anyone help with my code.

JS

$(document).ready(function () {

    $(":checkbox").click(function () {

        $(this).attr("checked", true);

        $(this).siblings().attr("checked", false);

    });

    var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');

    allWells.hide();

    navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
    $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-success').addClass('btn-default');
            $item.addClass('btn-success');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function () {

        var checkid = "";

        $("[name ='checkboxList']").each(function () {

            if ($(this).is(':checked')) {

                checkid = $(this).attr("id");

            }

        })

        if (checkid != "") {

            if (checkid == "chcEvet") {

                var curStep = $(this).closest(".setup-content"),
                curStepBtn = curStep.attr("id"),
                step = ("step-2"),
                nextStepWizard = $('div.setup-panel div a[href="#' + step + '"]').parent().next().children("a"),
                curInputs = curStep.find("input[type='text'],input[type='url']"),
                isValid = true;

            }
            else if (checkid == "chcYes") {
                var curStep = $(this).closest(".setup-content"),
                curStepBtn = curStep.attr("id"),
                step = ("step-3"),
                nextStepWizard = $('div.setup-panel div a[href="#' + step + '"]').parent().next().children("a"),
                curInputs = curStep.find("input[type='text'],input[type='url']"),
                isValid = true;
            }

            else {
                var curStep = $(this).closest(".setup-content"),
                curStepBtn = curStep.attr("id"),
                step = ("step-1"),
                nextStepWizard = $('div.setup-panel div a[href="#' + step + '"]').parent().next().children("a"),
                curInputs = curStep.find("input[type='text'],input[type='url']"),
                isValid = true;
            }
        }
        else {
            alert("Seçim Yapın !!")
        }

        $(".form-group").removeClass("has-error");
        for (var i = 0; i < curInputs.length; i++) {
            if (!curInputs[i].validity.valid) {
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }

        if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-success').trigger('click');
});

HTML

<div class="modal-body">
    <div class="container">
        <div class="stepwizard">
            <div class="stepwizard-row setup-panel">
                <div class="stepwizard-step col-xs-3">
                    <a href="#step-1" type="button" class="btn btn-success btn-circle">1</a>
                    <p>
                        <small>İşletmeniz Var mı ?</small></p>
                </div>
                <div class="stepwizard-step col-xs-3">
                    <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">
                        2</a>
                    <p>
                        <small>Proje Fikir - Ünivesite Ödül</small></p>
                </div>
                <div class="stepwizard-step col-xs-3">
                    <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">
                        3</a>
                    <p>
                        <small>E-Ticaret mi ?</small></p>
                </div>
                <div class="stepwizard-step col-xs-3">
                    <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">
                        4</a>
                    <p>
                        <small>Kaç Yıllık</small></p>
                </div>
            </div>
        </div>
        <form role="form">
        <div class="panel panel-primary setup-content" id="step-1">
            <div class="panel-heading">
                <h3 class="panel-title">
                    İşletme</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="control-label">
                        İşletmeniz var mı ?
                    </label>
                </div>
                <div class="form-group">
                    <input type="checkbox" class="form-check-input" name="checkboxList" id="chcEvet" />
                    Var
                    <div class="col-lg-push-2">
                    </div>
                    <input type="checkbox" class="form-check-input" name="checkboxList" id="chcHayir" />
                    Yok
                </div>
                <button class="btn btn-primary nextBtn pull-right" type="button">
                    İleri</button>
            </div>
        </div>
        <div class="panel panel-primary setup-content" id="step-2">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Proje Fikir - Üniversite Ödül</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="control-label">
                        Proje Fikir Ödülü mü ?
                    </label>
                    <a href="proje-fikir-odulu.aspx" type="button" class="btn btn-warning">Evet</a>
                </div>
                <div class="form-group">
                    <label class="control-label">
                        Üniversite Girişimcilik Ödülü mü ?
                    </label>
                    <a href="universite-girisimcilik-kulubu-odulu.aspx" type="button" class="btn btn-warning nextBtn">
                        Evet</a>
                </div>
                <button class="btn btn-success nextBtn pull-right" type="submit">
                    İleri</button>
            </div>
        </div>
        <div class="panel panel-primary setup-content" id="step-3">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Proje E-Ticaret</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="control-label">
                        Proje E-Ticaret mi ?
                    </label>
                    <a href="proje-fikir-odulu.aspx" type="button" class="btn btn-success">Evet</a>
                    <div class="col-lg-push-2">
                    </div>
                    <input type="checkbox" class="form-check-input" name="checkboxList" id="chcYes" />
                    Hayır
                </div>
                <button class="btn btn-success nextBtn pull-right" type="submit">
                    İleri</button>
            </div>
        </div>
        <div class="panel panel-primary setup-content" id="step-4">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Firma Kuruluş</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="control-label">
                        Firma kuruluş 5 yıldan az mı ?
                    </label>
                    <a href="proje-fikir-odulu.aspx" type="button" class="btn btn-success">Evet</a>
                    <a href="proje-fikir-odulu.aspx" type="button" class="btn btn-danger">Hayır</a>
                </div>
                <button class="btn btn-success pull-right" type="submit">
                    Finish!</button>
            </div>
        </div>
        </form>
    </div>
</div>

 

 

You are viewing reply posted by: dharmendr 9 months ago.
Posted 9 months ago
AliYilmaz says:
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');

 Change above line with below.

if (isValid) { nextStepWizard.removeAttr('disabled').trigger('click'); return false; }