Выберите хотя бы одно радио / флажок на активной вкладке - PullRequest
Новая
       10

Выберите хотя бы одно радио / флажок на активной вкладке

0 голосов
/ 07 мая 2018

Я использую вкладку Bootstrap для отображения вопросов и ответов на опрос (либо список флажков, либо список переключателей). Мне нужно проверить, что на каждой вкладке (если она активна в данный момент) должен быть выбран хотя бы один переключатель / флажок. Как мне этого добиться?

Мой 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>

При нажатии на якорь с идентификатором "aSwitchToNext" мне нужно подтвердить выбор ввода.

Я попробовал, как показано ниже, но это работает и для неактивных вкладок. 

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

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Попробуйте это

Проверьте демо здесь

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;
    }    
  });
});
0 голосов
/ 07 мая 2018

Использование имеет класс по нажатию кнопки «Назад» или «Далее», затем проверьте количество переключателей и флажков под этим 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
            }
         }
      });

    });
...