jQuery验证 - 自定义单选按钮（上切换/关）

Question

这里是我的困境：

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

声音混乱？这里是我的代码：

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 ：又只是一个片段，是有效的这一部分，因为整个形式是巨大的，这就是所要进行的唯一部分

$("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单选按钮被标记检查=“假”的JQuery验证代码仍然把它看作选择，从而允许用户的进展。

Answer 1

所以，答案如下：

后直接我宣布另外的规则输入[名称=“风格”]，我只是添加了这个：

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

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

Answer 2

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

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

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

}

其结果是，像复选框无线电元件。

Ref。 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/