Установите хотя бы одно радио / флажок на активной вкладке
Я использую вкладку 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>
При щелчке якоря с идентификатором «aSwitchToNext» мне нужно подтвердить выбор ввода.
Я пробовал, как показано ниже, но он работает и для неактивных вкладок.
if ($('div.active > .considerable > input:checked').length) {
// Continue
}
else{
alert("Please select an answer");
}
@ clearshot66 сначала мне нужно узнать, активна ли вкладка или нет (bootstrap), а затем мне нужно проверить, выбрано ли что-нибудь или нет.
Пожалуйста, предоставьте свой полный HTML
Ответы 2
Используйте has class при щелчке назад или далее, затем проверьте количество переключателей и флажков под этим 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
}
}
});
});
Попробуй это
Проверить демо здесь
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;
}
});
});
попробуйте, если hasClass ("активный")