Question

hi i have three tabs in jquery,

i want to disable the second and the third tab if the below two fields are selected the option “No” which is on the first tab.

<!--    Chest compressions performed    -->
<tr id="ContainerQ110I1039">
    <td>Chest compressions performed&nbsp;</td>
    <td><select name="Q110I1039" id="Q110I1039">
            <option value=""  ></option>
            <option value="0"  >No</option>
            <option value="1"  >Yes</option>
        </select>
    </td>
 </tr>
<!--    Defibrillation delivered    -->
<tr id="ContainerQ111I1040">
    <td>Defibrillation delivered&nbsp;</td>
    <td><select name="Q111I1040" id="Q111I1040" >
            <option value=""  ></option>
            <option value="0"  >No</option>
            <option value="1"  >Yes</option>
        </select>
    </td>
 </tr>

The below are the tabs

<ul class='tabs'>
 <li><a href='#tab1'>2222 calls</a></li>
 <li><a href='#tab2'>Cardiac Arrest</a></li>
 <li><a href='#tab3'>Outcome </a></li>
</ul>

the below is the jquery so far

<script language="javascript">
        // Wait until the DOM has loaded before querying the document
        $(document).ready(function(){
            $('ul.tabs').each(function(){
                // For each set of tabs, we want to keep track of
                // which tab is active and it's associated content
                var $active, $content, $links = $(this).find('a');

                // If the location.hash matches one of the links, use that as the active tab.
                // If no match is found, use the first link as the initial active tab.
                $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);

                $active.addClass('active');
                $content = $($active.attr('href'));

                // Hide the remaining content
                $links.not($active).each(function () {
                    $($(this).attr('href')).hide();
                });

                // Bind the click event handler
                $(this).on('click', 'a', function(e){
                    // Make the old tab inactive.
                    $active.removeClass('active');
                    $content.hide();

                    // Update the variables with the new link and content
                    $active = $(this);
                    $content = $($(this).attr('href'));

                    // Make the tab active.
                    $active.addClass('active');
                    $content.show();

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });


            });
        });
    </script>

Many thanks

Answer 1

Using jQuery you could maybe implement something like this:

$("select").change(function () {
    if ($("#Q110I1039").find(":selected").text() == "No" && $("#Q111I1040").find(":selected").text() == "No") {
        $(".tabs li").not(":first-child").find("a").addClass("disabled");
    }
});

What we do here is that each time we select an answer we check if both answers are set to NO. If it is the case we add to all the tabs, except for the first one, the class disabled.

Then we add this code to “block” the tabs:

$(document).on("click", ".disabled", function () {
    return false;
});

so that if you click on them nothing happens.

Here is a DEMO