lundi 7 mai 2018

Select at least one Radio / Checkbox within a active tab

I'm using a Bootstrap tab to display the Survey Question and Answers (either Checkbox list or Radio button list). I need to validate that in each tab (if it is Active at that moment ) at least one Radio / Checkbox should be selected. How can I achieve this?

My DOM looks like this

<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>

On click of anchor with id "aSwitchToNext" I need to validate the input selection.

I tried as below, but it's working for non-active tabs also.

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




Aucun commentaire:

Enregistrer un commentaire