Question

我正在使用Bootstrap选项卡显示调查问题和答案（复选框列表或单选按钮列表）。我需要在每个选项卡中验证它（如果它在那时是活动的），应该选择至少一个Radio / Checkbox。我怎样才能做到这一点？

我的DOM看起来像这样

<div class="tab-content">
    <div role="tab" class="tab-pane active" id="1">
        <div class="considerable">
           ... Radio button list goes here 
        </div>
    </div>
    <div role="tab" class="tab-pane" id="2">
        <div class="considerable">
           ... Checkbox list goes here 
        </div>
    </div>
</div>
<div id="divCalculatorControl">
    <a href="#" id="aSwitchToBack" style="">Back</a>
    <a href="#" id="aSwitchToNext">Next</a>
</div>

点击id为“aSwitchToNext”的锚时，我需要验证输入选择。

我尝试如下，但它也适用于非活动标签。

if ($('div.active > .considerable > input:checked').length) {
   // Continue
}
else{
   alert("Please select an answer");
}

Answer 1

使用on class on back或next，然后检查该div下选中或不选中的单选按钮和复选框的数量

$(document).ready(function(){
        $("#aSwitchToBack").click(function(){
         if($(".tab-pane").hasClass("active")){
                var err = 0;
            if($(this).find("input:radio:checked").length < 1){
                err++;
            }
            if($(this).find("input:checkbox:checked").length < 1){
                err++;
            }
            if(err > 1){
                 // stop here
            }
         }
      });

    });

Answer 2

试试这个

检查演示 here

JS：

$(function() {
  $('a[data-toggle="tab"]').on("show.bs.tab", function(e) {
    let getCurrenActiveTabContent = $(e.relatedTarget).attr("href");
    let activePanel = getCurrenActiveTabContent + " input";
    if (!$(activePanel).is(":checked")) {
      return false;
    }    
  });
});

在活动选项卡中选择至少一个Radio / Checkbox

2 个答案: