jQuery 验证 - 使用自定义单选按钮(打开/关闭)

Posted

技术标签:

【中文标题】jQuery 验证 - 使用自定义单选按钮(打开/关闭)【英文标题】:jQuery Validation - with custom Radio Buttons (toggle on/off) 【发布时间】:2017-07-30 21:01:49 【问题描述】:

这是我的困境:

客户希望对一组复选框进行表单验证,但在该组中,有一组单选按钮,因此用户只能选择该组中的一个。问题是,客户端还希望能够选择和取消选择任何单选按钮,所以我必须找到一个自定义脚本来允许该功能。其中的问题是,此自定义功能需要一个隐藏的虚拟单选按钮,但最初选择用于标记已检查和数据已检查的属性,并且将复选框/单选按钮的整个部分标记为有效,即使用户没有实际检查过任何东西。

听起来令人困惑?这是我的代码:

html(整个表单都在引导表单向导中,所以我不会发布整个内容,只发布重要部分)

<div class="form-group">
    <label for="style" class="col-sm-3 control-label">Style*<br/></label>
    <div class="col-sm-9">
        <div class="panel-group checkbox-group" id="accordion" role="tablist">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab">
                    <h4 class="panel-title"><a role="button" data-toggle="collapse" href="#panelStyle" class="panel-title-link collapsed"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Style</a></h4>
                </div>
                <div id="panelStyle" class="panel-collapse collapse" role="tabpanel">
                    <div class="panel-body">
                        <input type="checkbox" id="styleBallad" name="style" value="Ballad"/><label for="styleBallad"><i class="ion-ios7-checkmark"></i>Ballad</label>
                        <input type="checkbox" id="styleBluegrass" name="style" value="Bluegrass"/><label for="styleBluegrass"><i class="ion-ios7-checkmark"></i>Bluegrass</label>
                        <input type="checkbox" id="styleBlues" name="style" value="Blues"/><label for="styleBlues"><i class="ion-ios7-checkmark"></i>Blues</label>
                        <input type="checkbox" id="styleBroadway" name="style" value="Broadway"/><label for="styleBroadway"><i class="ion-ios7-checkmark"></i>Broadway</label>
                        <input type="checkbox" id="styleCalypso" name="style" value="Calypso"/><label for="styleCalypso"><i class="ion-ios7-checkmark"></i>Calypso</label>
                        <input type="checkbox" id="styleChorale" name="style" value="Chorale"/><label for="styleChorale"><i class="ion-ios7-checkmark"></i>Chorale</label>
                        <input type="checkbox" id="styleConga" name="style" value="Conga"/><label for="styleConga"><i class="ion-ios7-checkmark"></i>Conga</label>
                        <input type="checkbox" id="styleCumbia" name="style" value="Cumbia"/><label for="styleCumbia"><i class="ion-ios7-checkmark"></i>Cumbia</label>
                        <input type="checkbox" id="styleDixieland" name="style" value="Dixieland"/><label for="styleDixieland"><i class="ion-ios7-checkmark"></i>Dixieland</label>
                        <input type="checkbox" id="styleFolkTraditional" name="style"/><label for="styleFolkTraditional"><i class="ion-ios7-checkmark"></i>Folk and Traditional</label>
                        <div id="folkTraditionalDetails" class="folkTraditionalDetails">
                            <div class="form-group">
                                <input type="text" class="form-control" id="folkTraditionalCountry" name="folkTraditionalCountry" placeholder="Country">
                                <label for="folkTraditionalCountry" class="error" style="display:none;"></label>
                            </div>  
                        </div>
                        <input type="checkbox" id="styleGospel" name="style" value="Gospel"/><label for="styleGospel"><i class="ion-ios7-checkmark"></i>Gospel</label>
                        <input type="checkbox" id="styleHipHop" name="style" value="Hip-Hop"/><label for="styleHipHop"><i class="ion-ios7-checkmark"></i>Hip-Hop</label>
                        <input type="checkbox" id="styleHymn" name="style" value="Hymn"/><label for="styleHymn"><i class="ion-ios7-checkmark"></i>Hymn</label>
                        <input type="checkbox" id="styleJazz" name="style" value="Jazz"/><label for="styleJazz"><i class="ion-ios7-checkmark"></i>Jazz</label>
                        <input type="checkbox" id="styleJig" name="style" value="Jig"/><label for="styleJig"><i class="ion-ios7-checkmark"></i>Jig</label>
                        <input type="checkbox" id="styleKlezmer" name="style" value="Klezmer"/><label for="styleKlezmer"><i class="ion-ios7-checkmark"></i>Klezmer</label>
                        <input type="checkbox" id="styleLullaby" name="style" value="Lullaby"/><label for="styleLullaby"><i class="ion-ios7-checkmark"></i>Lullaby</label>
                        <input type="checkbox" id="styleMarch" name="style" value="March"/><label for="styleMarch"><i class="ion-ios7-checkmark"></i>March</label>
                        <input type="checkbox" id="stylePop" name="style" value="Pop"/><label for="stylePop"><i class="ion-ios7-checkmark"></i>Pop</label>
                        <input type="checkbox" id="styleRap" name="style" value="Rap"/><label for="styleRap"><i class="ion-ios7-checkmark"></i>Rap</label>
                        <input type="checkbox" id="styleReggae" name="style" value="Reggae"/><label for="styleReggae"><i class="ion-ios7-checkmark"></i>Reggae</label>
                        <input type="checkbox" id="styleRock" name="style" value="Rock"/><label for="styleRock"><i class="ion-ios7-checkmark"></i>Rock</label>
                        <input type="checkbox" id="styleRockNRoll" name="style" value="Rock and Roll"/><label for="styleRockNRoll"><i class="ion-ios7-checkmark"></i>Rock and Roll</label>
                        <input type="checkbox" id="styleSalsa" name="style" value="Salsa"/><label for="styleSalsa"><i class="ion-ios7-checkmark"></i>Salsa</label>
                        <input type="checkbox" id="styleSamba" name="style" value="Samba"/><label for="styleSamba"><i class="ion-ios7-checkmark"></i>Samba</label>
                        <input type="checkbox" id="styleSpiritual" name="style" value="Spiritual"/><label for="styleSpiritual"><i class="ion-ios7-checkmark"></i>Spiritual</label>
                        <input type="checkbox" id="styleSwing" name="style" value="Swing"/><label for="styleSwing"><i class="ion-ios7-checkmark"></i>Swing</label>

                        <div class="panel-group" id="accordionStyle" role="tablist" aria-multiselectable="true" style="margin-bottom: 5px;">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab">
                                    <h4 class="panel-title">
                                        <a id="accordionstyleWesternEra" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionStyle" href="#styleWesternEra">
                                            <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Western Art Styles
                                        </a>
                                    </h4>
                                </div>
                                <div id="styleWesternEra" class="panel-collapse collapse" role="tabpanel">
                                    <div class="panel-body">
                                        <p class="help-block" style="padding: 0 5px;">You can only choose one of these styles</p>
                                        <div class="checkbox-group">
                                            <input type="radio" id="styleInit" name="style" checked="false" data-waschecked="true" value="" style="display: none;"/>
                                            <input type="radio" id="styleMedieval" name="style" value="Western Art Style: Medieval"/><label for="styleMedieval"><i class="ion-ios7-checkmark"></i>Medieval</label>
                                            <input type="radio" id="styleRenaissance" name="style" value="Western Art Style: Renaissance"/><label for="styleRenaissance"><i class="ion-ios7-checkmark"></i>Renaissance</label>
                                            <input type="radio" id="styleBaroque" name="style" value="Western Art Style: Baroque"/><label for="styleBaroque"><i class="ion-ios7-checkmark"></i>Baroque</label>
                                            <input type="radio" id="styleClassical" name="style" value="Western Art Style: Classical"/><label for="styleClassical"><i class="ion-ios7-checkmark"></i>Classical</label>
                                            <input type="radio" id="styleRomantic" name="style" value="Western Art Style: Romantic"/><label for="styleRomantic"><i class="ion-ios7-checkmark"></i>Romantic</label>
                                            <input type="radio" id="styleImpressionistic" name="style" value="Western Art Style: Impressionistic"/><label for="styleImpressionistic"><i class="ion-ios7-checkmark"></i>Impressionistic</label>
                                            <input type="radio" id="style20thPre" name="style" value="Western Art Style: 20th Century (pre-1945)"/><label for="style20thPre"><i class="ion-ios7-checkmark"></i>20th Century (pre-1945)</label>
                                            <input type="radio" id="style20thPost" name="style" value="Western Art Style: 20th Century (post-1945)"/><label for="style20thPost"><i class="ion-ios7-checkmark"></i>20th Century (post-1945)</label>
                                            <input type="radio" id="style21st" name="style" value="Western Art Style: 21st Century"/><label for="style21st"><i class="ion-ios7-checkmark"></i>21st Century</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <label for="style" class="error" style="display:none;"></label>
        </div>   
    </div>
</div> 

验证 JS:再次只是一个对本节有效的 sn-p,因为整个表单非常庞大,这是唯一受到影响的部分

$("input[name='style']").rules("add", 
            required: true,
            messages: 
                required: "<i class='fa fa-exclamation-circle'></i> " + "<span>Please choose at least ONE style</span>"
            
        );

单选按钮切换功能 JS:

$("input:radio[name='style']").click(function()
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings("input:radio[name='style']").data('waschecked', false);
    );

即使 styleInit 单选按钮被标记为 checked="false",jQuery 验证代码仍将其视为已选中,从而允许用户继续操作。

【问题讨论】:

由于客户想要取消选择单选按钮,所以基本上他需要类似于复选框的功能。因此,您可以在 html 中使用复选框而不是单选按钮,然后使用 css 您可以将它们显示为单选按钮。 ***.com/questions/279421/… 【参考方案1】:

所以,答案如下:

在我声明为 input[name='style'] 添加规则之后,我只是简单地添加了这个:

$("#styleInit").prop('checked', false);

这可确保在显示该部分时,无论何时,#styleInit 单选按钮的选中属性为 false。这允许 jQuery 验证脚本按预期执行

【讨论】:

【参考方案2】:

由于客户想要取消选择单选按钮,所以基本上他需要类似于复选框的功能。

因此,在您的 html 代码中,您可以使用复选框而不是单选按钮,然后使用 css 您可以将这些显示为单选按钮。

input[type="checkbox"] 
-webkit-appearance: radio; /* Chrome, Safari, Opera */
-moz-appearance: radio;    /* Firefox */
-ms-appearance: radio;     /* not currently supported */

结果是看起来像复选框的单选元素。

参考。 Can you style an html radio button to look like a checkbox?

由于您对所有单选按钮(现在是复选框)使用相同的名称,因此您在应用验证时不会遇到问题。

现在您使用以下 jquery 代码从组中一次仅选择其中一个复选框。

   $('input[name="style"]').on('change', function() 
        $('input[name="style"]').not(this).prop('checked', false);  
   );

我已经为此创建了一个小提琴。

http://jsfiddle.net/paraselixir/MQM8k/1431/

【讨论】:

以上是关于jQuery 验证 - 使用自定义单选按钮(打开/关闭)的主要内容,如果未能解决你的问题,请参考以下文章

如果未选中,则对单选按钮进行自定义验证 |顺风

使用 jQuery 验证插件验证单选按钮组

使用 jQuery 检查验证单选按钮

jQuery在单选按钮之间使用条件条件进行验证

样式单选按钮(jquery?)

JQuery 验证消息奇怪地出现在两个单选按钮之间