Отключить и скрыть элементы формы с помощью Fieldset на основе выбора

Question

У меня есть форма с полем начального выбора для «Тип изменения». Идея состоит в том, что пользователь выбирает тип изменения, и появляются соответствующие поля.

Я использую наборы полей для группировки элементов, и каждый «Тип изменения» может иметь несколько наборов полей, и каждый набор полей может применяться к одному или нескольким «типам изменений», поэтому я использую классы. Затем я использую функцию jquery, чтобы добавить атрибут disabled, чтобы отключить и скрыть наборы полей на основе выбора.

Моя проблема в том, что, как видно из JSFiddle , не все наборы полей отображаются, если они применяются к множественному выбору.

HTML

     <label for="choose">Type</label>
        <select class="choose" id="choose">
            <option value=".none">Please Select a Change Reason</option>
            <option value=".newhire">New Hire</option>
            <option value=".term">Termination</option>
        </select>

        <fieldset class="newhire">
            <h5>Employee Information</h5>
            <label for="firstname">First Name<sup>*</sup></label>
            <input name="firstname" class="form-control input-sm" placeholder="First Name" data-rules="required" autocomplete="off"/>
        </fieldset>



        <fieldset class="term">
            <label for="currentlocation">Current Location<sup>*</sup></label>
             <select class="form-control input-sm" name="currentlocation"> 
                <option value="">--</option> 
                <option value="loc1">Location 1</option> 
                <option value="loc2">Location 2</option>                                     
            </select>
         </fieldset>  

       <fieldset class="newhire term">
            <h5>Attachment</h5>
            <input type="file" class="form-control" name="attachment">

            <!--THIS IS THE SUBMIT BUTTON-->
            <a class="btn btn-submit btn-success">Submit</a>           
            <!--END SUBMIT BUTTON-->
        </fieldset>

Скрипт

 $(function(){
        var enableDisable = function(){
            $('option', this).each(function(){
               $($.prop(this, 'value')).prop('disabled', !$.prop(this, 'selected')); 
            });
        };
        $('#choose').on('change', enableDisable).each(enableDisable);
    });

CSS

 input, select {width:100%;}
 fieldset[disabled] {
     display:none;
 }

Answer 1

Я просто использовал гораздо более простой оператор if else, который работает. Я надеялся избежать этого пути, так как у меня будет около 9 операторов if, поэтому, если у кого-то есть лучшее решение, я бы с удовольствием его попробовал.

$(function(){
        var enableDisable = function(){
            $('option', this).each(function(){ 
               var choice = $('.choose').val();
               if(choice == ".none") 
                    {
                        $('fieldset').hide();
                    } 
                else if (choice == ".newhire")
                    {
                        $('fieldset').hide();
                        $('.newhire, .all').show();
                    }
                else if (choice == ".term")
                    {
                        $('fieldset').hide();
                        $('.term, .all').show();
                    }
                else if (choice == ".status")
                    {
                        $('fieldset').hide();
                        $('.status, .all').show();
                    }


            });
        };
        $('#choose').on('change', enableDisable).each(enableDisable);
    });