根据选择使用 Fieldset 禁用和隐藏表单元素答案

【问题标题】：Disable and hide form elements withing Fieldset based on selection根据选择使用 Fieldset 禁用和隐藏表单元素
【发布时间】：2020-05-07 21:03:02
【问题描述】：

我有一个带有“更改类型”的初始选择字段的表单。这个想法是用户选择更改类型并出现相关字段。

我正在使用字段集对元素进行分组，每个“更改类型”可能有多个字段集，每个字段集可能适用于一个或多个“更改类型”，因此我使用的是类。然后，我使用 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;
 }

【问题讨论】：

标签： jquery forms

【解决方案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);
    });

【讨论】：