0

我的表单中有一些部分需要根据上一部分所需的输入值启用或禁用。默认情况下，所有部分都被禁用，除了第一个部分，并且所需的输入应用了所需的类。如果所有必填字段都有值，则检查下一部分，如果所有这些必填字段都有值，请检查下一部分等。启用所有必填字段后，假设用户返回并清除他们的名字，它应该禁用所有的下一部分。一旦用户再次输入他们的名字，请检查所有接下来的部分。谢谢！JS小提琴

HTML：

<form class="contact-form">
            <div class="section">
                <div class="selStyled"><!--selStyled required for IE custom dropdowns-->
                    <select name="area" class="required">
                        <option value="">Pick something yo*</option>
                        <option value="option 1">option 1</option>
                        <option value="option 2">option 2</option>
                        <option value="option 3">option 3</option>
                        <option value="option 4">option 4</option>
                        <option value="option 5">option 5</option>
                        <option value="option 6">option 6</option>
                    </select>
                </div>
                <input type="text" name="first-name" placeholder="First Name*" class="split-input required" />                  
                <input type="text" name="phone" placeholder="Phone" class="split-input" />
            </div>

            <div class="section disabled">
                <input type="text" name="address1" placeholder="Address 1" disabled />
                <input type="text" name="city" placeholder="City*" class="split-input required"  disabled />
                <input type="text" name="state" placeholder="State/Province*" class="split-input required"  disabled />

            </div>

            <div class="section disabled">
                <textarea name="message" placeholder="Leave a comment sucka*" class="required" disabled ></textarea>
            </div>
            <input type="submit" name="submit" value="send" class="submit" disabled />
        </form>

JS：

$('.contact-form input, .contact-form select, .contact-form textarea').bind('input propertychange change',function(){
    var currentInput = $(this);
    var currentContainer = currentInput.parent();
    var allRequired = 1;
    var requiredForm = 1;
    currentContainer.find('.required').each(function(){
        var currentRequiredValue = $(this).val();
        if(currentRequiredValue == '')
            allRequired = 0;
    });
    if(allRequired == 1) {//if not empty
        var nextSection = currentContainer.next('.section.disabled');
        nextSection.removeClass('disabled').addClass('enabled').find('input, select, textarea').prop('disabled',false);


    }else{//if empty
        var enabledSections = currentContainer.nextAll('.section.enabled');
        enabledSections.removeClass('enabled').addClass('disabled').find('input, select, textarea').prop('disabled',true);
    }
    $('.contact-form .required').each(function(){//check all required fields
        var formRequiredValue = $(this).val();
        if(formRequiredValue == '')
            requiredForm = 0;
    });
    if(requiredForm == 1){//send button
        $('.contact-form .submit').prop('disabled',false);
    }else{
        $('.contact-form .submit').prop('disabled',true);
    }
});
4

1 回答 1

0

试试这个：- http://jsfiddle.net/adiioo7/vG5u9/1/

JS 更改：-

var currentContainer = currentInput.parent();

var currentContainer = currentInput.closest(".section");
于 2013-10-10T04:11:09.353 回答